Adding password authentication to your site

Last modified: March 13th, 2023

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

Require a password to access your site.

To set up password authentication for your site:

  1. Go to the Site Settings / Authentication section
  2. Select Password and click Switch to Password authentication
  3. Enter a password and click Update Site Password
Screenshot of password tab in the authentication interface

Visitors to your site will be prompted for the password to view.

Screenshot of password login splash screen

Creating a custom login page#

Customize the password login page with your own branding.

CloudCannon injects classes into the HTML to indicate the result of the action. They are injected into {{messageClasses}}. Use these classes to provide error handling and success notifications in your forms.

Filename: login.html

Form action: not required

Form inputs: username, password

Message classes: has-incorrect-login

For Jekyll-generated pages, use raw tags so Jekyll outputs it for CloudCannon to process later: {% raw %}{{messageClasses}}{% endraw %}.

CloudCannon requires a hidden username input here for internal reasons. The value is ignored.

login.html
copied
<!DOCTYPE html>

<html>
  <head>
    <title>Log in</title>
    <style>
      .incorrect-login-message {
        display: none;
      }

      .has-incorrect-login .incorrect-login-message {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Log in</h1>

    <form action="" method="post" class="{{messageClasses}}">
      <div class="incorrect-login-message">
        Incorrect password.
      </div>

      <label for="password">Password</label>
      <input id="password" type="password" name="password" autofocus>

      <input type="hidden" name="username" value="user">

      <input type="submit" value="Log in">
    </form>
  </body>
</html>
Open in a new tab