Password Protected Pages With Jekyll

When I moved to Jekyll I didn’t have a way to password protect pages. Actually, I didn’t really need it so it wasn’t a real concern to me and I did not yet look into it. Until today. I was contacted by Osama of TimeSvr who asked me about this and so I thought it might be a good idea to share what we came up with.

Since we only needed to protect pages within a certain context we decided that .htaccess protection would be sufficient enough.

Update 2014-11-18: This does only apply to Apache installations. If you’re using nginx or something else you might not be able to make use of this approach.

Project Structure

The setup for password proteced pages looks like this:

my-website.com
|-my-project
  |-index.md
  |-htaccess
  |-htpasswd
|-...

Based on this suggestion I created template files for htaccess and htpasswd jekyll style using an appropriate front matter (which basically only defines the permalink to the actual, hidden .ht* files).

---
layout: null
permalink: my-project/.htaccess
---

(For htaccess; adapt for htpasswd appropriately.)

Additionally, htaccess needs the configuration:

AuthType Basic
AuthName "Protected Area"
AuthUserFile /full/path/to/.htpasswd
Require valid-user

index.md is the template for the website with the protected content. Just a basic Jekyll page.

Creating Credentials

This actually caused some trouble for me. I first started googling for webservices that offered credential creation for .htaccess files, since I wasn’t aware of the appropriate way to do it: The official htpasswd tool. The credentials created by the websites did somehow never work for me. I’m not a hundret percent certain that it wasn’t my fault, though…

Anyway, htpasswd -m -c /path/to/my-website.com/my-project/tempcreds foo creates a file tempcreds containing the user foo and the encrypted password (which you’ll be asked for after hitting return). Next, I had to take this entire string and added it to the end of my htpasswd file.

Publishing

After re-building my site I uploaded _site/my-project/ to my server. Make sure to not forget the hidden .ht* files as well. That’s it!

Hope this helps.