How to Password Protect a Hugo Website

May 25, 2020

Hugo is a static website generator that ships without a database which adds security, simplicity, and speed. But, no database means that Hugo doesn’t have a built-in solution for password protection or user management.

Luckily, your web server does have the ability to perform basic user management. This is a good solution for making a Hugo site private.

I use this very basic .htaccess configuration to prompt a user for credentials before they can access my site. In my use case, this is usually a test version of the site I share with one or two people for feedback.

To set this up:

Create a new text file called '.htaccess'.
Using your favorite text editor, populate the .htaccess with the text below. This file will tell the web server not to allow access to the page until a user name and credentials have been supplied.

.htaccess file contents:
```
AuthType Basic
AuthName "Password Protected Area"
AuthUserFile /YOUR_WEBSITE_ROOT_FOLDER/.htpasswd
Require valid-user
```
Typically ‘YOUR_WEBSITE_ROOT_FOLDER’ this is the public_html folder on your web host.

YOUR_WEBSITE_ROOT_FOLDER is the server side folder that you copied the contents of the client side public folder to. This public folder was created in your local hugo site directory after running the ‘hugo’ command.
Create a file named '.htpasswd'. This file will hold valid user names and passwords to use for authentication.
To populate the file created in the previous step, you will need to generate a user name and hashed password. The tool here works well for .htaccess password generation. Copy and paste the text returned using this tool into the .htpasswd file created in the previous step. The example below is for the user ‘test’ and password ‘test’ using the Bcrypt algorithm.

.htpasswd file contents generated from the tool above:
```
test:$2y$10$A41tOLz2ixfBk29Nq7EPVuwUXv.fEZvkT2hnuMSuqwGmdGR9URYCq
```
Now place both the .htaccess and .htpasswd files in the root directory of hosting your Hugo site - the YOUR_WEBSITE_ROOT_FOLDER outlined above.

For example, if copying these files directly to your host, this might be the public_html folder of your web server.

Alternatively, you could copy these two files into the ‘public’ folder that is output when running the ‘hugo’ command. After copying these files to public, you can copy the contents of your Hugo site’s public folder to your web server in one motion.

The contents of an example Hugo site’s public folder or a web server’s public_html folder with the .htaccess and .htpasswd files highlighted:

To set this up:

.htaccess file contents:

.htpasswd file contents generated from the tool above:

The contents of an example Hugo site’s public folder or a web server’s public_html folder with the .htaccess and .htpasswd files highlighted: