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.
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
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.
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.
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.
Next, create an .htaccess file inside of the protected directory and append the four lines that the generator provided earlier to the file.
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.
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.
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.
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 christopherrung.com/assets/ before I included this line.
Append the following to your web directory’s .htaccess file to prevent people from viewing your website’s index.
Thanks for following along! Please let me know if you have any questions.