Figuring Out Password Protection in Hugo

I recently tried to add a password-protected page to my Hugo website. I thought it would be straightforward, but it turned out to be trickier than I expected.

Starting Out

I was excited to add this feature to my site. I imagined a simple solution that would keep some content private while still using Hugo’s static site generation. I thought, “How hard could it be?”

Reality Check

My excitement faded quickly when I started working on it. Hugo doesn’t have built-in support for things like server-side authentication because it’s a static site generator. This meant I had to get creative with client-side solutions, which brought its own set of challenges.

The Client-Side Challenge

I began with a basic HTML form for the password input and used CSS to hide the protected content. Then I added some JavaScript to check the password. Simple enough, right? Well, not really.

The main problem was security. Putting passwords in client-side code isn’t safe. Even if I used hashing, anyone who knows how to use browser developer tools could easily find and crack it. It felt like I was trying to lock a door with a piece of string.

Adding Parameters to the Markdown

One crucial step I learned was adding specific parameters to the front matter of my Markdown files. For password-protected pages, I needed to include:

---
layout: "password-protected"
password: ""
---

This tells Hugo to use a special layout for password-protected content and specifies the password. However, I quickly realized that having the password in plain text in the Markdown file wasn’t secure either.

Looking for Answers

I searched online for better ways to do this. I found some discussions on Reddit and Stack Overflow, but most suggestions either weren’t secure enough or needed server-side components – which didn’t work with Hugo.

I tried different ways to encrypt the password, hoping to find a balance between security and simplicity. But each attempt felt like I was just creating more problems to solve.

Keeping It Simple

At one point, I thought about using a complex system with encryption and special codes. It seemed clever until I realized I was probably making things more complicated and less secure.

A Moment of Truth

After struggling, I had to admit that maybe I was looking at the problem the wrong way. I decided to step back and think about what I really needed. Did I actually need client-side password protection, or was I trying to force something that didn’t fit? I started looking at other options, server-side authentication using AWS API Gateway and Lambda Function. This will probobaly be my next project.