The .htaccess File

4/2/17 Update

This website is now hosted on AWS S3. S3 does not support .htaccess, since it is a feature specific to Apache. As such, the testProtected page mentioned in this post is no longer functional. Apologies!


Have you ever wondered how to password protect pages on your website?

A file with the name .htaccess can control many aspects about its enclosing directory, including authentication. In this post, I will show you how to protect your pages with an authentication wall, setup common error pages (such as the 404-Not Found page), and prohibit your audience from browsing your website’s directory.

.htpasswd file

First, create a file named .htpasswd outside of the web directory to manage the users that may view the page(s) you wish to protect. I used this handy generator to create a hashed value of my password (never store passwords in plain text!).

I input the following into the generator

Generator Input

which provided the following output:


You may append this line to the .htpasswd file. The generator also produced the contents of the .htaccess file, provided below.

AuthName "This directory is protected"
AuthType Basic
AuthUserFile /SOMEDIR_OUTSIDE_ROOT/.htpasswd
require valid-user

The input to the “Name of Protected Section” field in the generator (and the text that appears after AuthName above) appears in the password prompt, highlighted below.

Password Prompt

Create the protected directory

Create a new directory in Apache’s web directory, which will contain the page that we wish to protect, index.html.

$ cd /var/www
$ mkdir testProtected
$ vim testProtected/index.html

Next, create an .htaccess file inside of the protected directory and append the four lines that the generator provided earlier to the file.

$ vim testProtected/.htaccess

Test this functionality by going to http://[your IP]/testProtected, and verify that an authentication wall appears. You may visit my testProtected page to see it in action. You may use username “test” and password “123” to gain access to the protected directory.

I updated my webpage and the .htaccess file disappeared!

This behavior occurs because Jekyll regenerates clears the web directory each time a change is detected in your web site’s folder. You may prevent files and directories from being deleted by adding a single line to _config.yml. The following describes its usage.

keep_files: [directories/files to keep]

I have the following line in my _config.yml, which protects my résumé, the .htaccess file, and the testProtected directory that we set up earlier.

keep_files: [Christopher_Rung-Resume, '.htaccess', testProtected]

Please note that the file extension should not be specified for files (I did not include the pdf extension after my résumé), and hidden files, such as .htaccess, must be enclosed in quotes.

Setup Error Page Redirection

Write an error page and place it in the web directory. You may find a list of common HTTP status codes here. I will cover the most common code–404 Not Found.

After you have created your 404.html page and placed it in your web directory, create a .htaccess file with the following line.

ErrorDocument 404 /404.html

This will redirect any unfound pages to your 404 page.

Prevent users from browsing you site’s directory

This is another one-liner to add to the .htaccess file, and will prevent your users from seeing your website’s directory structure. An example of this is shown below, which shows the result if someone visited before I included this line.

Web Directory Structure

Append the following to your web directory’s .htaccess file to prevent people from viewing your website’s index.

Options All -Indexes

Thanks for following along! Please let me know if you have any questions.