Skip to content

a-nau/password-protected-website-template

Repository files navigation

Template for Encrypted Single Page Website

This template repository makes it easy to create a password protected page that is hosted on Github pages. This can be useful for information or events that should not be available to everyone, e.g. for your birthday, wedding or a corporate event.

To check the demo use the password test.

Demo

Disclaimer: Please be aware, that I (or the dependencies) might have missed something, so do not assume this to be bullet proof. Do not share bank information or similar this way.

Usage

  • Create a repository from a template by clicking the use this template button
  • Select a repository name (your URL will be {GITHUB-ACCOUNT-NAME}.github.io/{REPOSITORY-NAME})
  • Choose the repository to be private, if you don't want people to be able to access the contents without the password
  • Create a Github secret named DECRYPTION_PASSPHRASE and set the value to your desired password (note that the CI pipeline will fail on the first attempt due to the missing password)
  • Set the publishing source to the main branch in order to activate hosting with Github Pages

To customize the website:

  • You can customize the login page

    • adjust the encrypt_with_assets.yml, i.e. the "Encrypt index" step to set the title, instructions and button name

      - name: Encrypt index
        run: >
          staticrypt index.html -p ${{ secrets.DECRYPTION_PASSPHRASE }} --short
          --template "password_template.html"
          --template-title "Login"
          --template-instructions "This is a test website, use the password 'test' to enter."
          --template-button "Open Page"
          --template-color-primary "#113e9f"
          --template-color-secondary "#e4e4e4"
    • For details and to change the full layout, see StatiCrypt

  • Edit the main.html which will be shown to visitors after encryption (the encrypted version, that is hosted is index.html)

    • Assets can be used as usual and will not be encrypted

Encrypted Assets

By default encryption of assets is enables, since the workflow encrypt_with_assets.yml is active. Note, this only replaces all directly linked images, CSS and JavaScript file in the HTML document with an in-place base64 representation. Thus, your relative links in files will probably not work anymore, since their location changed.

If you do not want to encrypt assets

Local Usage

If you don't want to have any of your data (even) in a private repository you can also convert it locally and only upload the index.html afterwards. To do this, follow these steps:

  • Build the image
    docker build -t ppw .
    
  • Run the encryption
    docker run -it --rm --name ppw -e PASSWORD=test --mount type=bind,source=${PWD},target=/code ppw
    
  • Ignore changes to main.html
    git update-index --skip-worktree main.html
    
    Optionally the same is needed for your assets.

Credits