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:

Go to the Site Settings / Authentication section
Select Password and click Switch to Password authentication
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

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.

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>

Adding password authentication to your site

Creating a custom login page#