How to Password Protect a Hugo Website

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:

  1. Create a new text file called ‘.htaccess’.

  2. 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.

  3. Create a file named .htpasswd. This file will hold valid user names and passwords to use for authentication.

  4. 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.

  5. 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.

Comment by Andrew:

WordPress allows to make it login-password entry, out-of-the-box. There’s no issues with this.

For hugo though, I’d be looking for .htaccess something. So you block your website, not your server. Try to google something like password protect on static site/hugo. So in this case, you close the reading option for everyone who has no password. Some hackers could be able to access media, probably. But if you’re planning to store no sensitive information there anyway, shouldn’t be any issues with that.

It should stop search engines, which is your primary concern. But frankly, I have no idea how they work these days. What if they are so AI they can do many nasty things. You can edit robots.txt, but who knows if they’ll respect it either.

Otherwise, you can use other mediums for that, e.g. a dedicated channel somewhere, Telegram, Discord, or anything. But I guess that’s not the case for the project.