How can I password protect a section of a static website?

Question

I have a basic, static website coded in html, css, and a little javascript for animation. I'm not collecting any information from visitors, so I just need basic security that opens a directory or page with a password.

Is there a simple way to accomplish that? I just have basic (and super inexpensive) hosting that uses a shared security certificate.

Ideally, I could style a nice looking text field and button that would that would unlock and redirect to a directory if the visitor used the correct password.

For context, I'm a designer and this is for additional work samples that I don't want publicly available or indexable by search engines.

Answer 1

The easiest way to do this on an apache server (most basic shared hosting uses Apache) would be to use .htaccess/.htpasswd files. (yes there is NOTHING not even a space before the . [dot] and do not have a . [dot] at the end. Some people will refer to theses as .htaccess [dothtaccess] or just even just htaccess files)

In the directory you want to be protected you would put a text file named .htaccess file with information similar to this:

AuthType Basic
AuthName "My Special Directory"
AuthUserFile /path/to/.htpasswd
Require valid-user

The /path/to/.htpasswd would need to be changed to the full path to your .htpasswd file. So on many shared hosting systems this could look something like /home/username/domain.name/.htpasswd - Generally speaking you don't want to put the .htpasswd file inside your public_html directory if you can avoid it.

From that point, you would need to create a .htpasswd generator online such as http://www.htaccesstools.com/htpasswd-generator/ -- Since you say you have very basic cheap hosting, I'm assuming you don't have shell access required to create a .htpasswd file on the server itself.

The .htpasswd file would look something like this:

anyusername:$apr1$3AtMWVIs$f4OYAR1WDctQ1EFHDq0UA/

If you have access to the shell, you can just use the htpasswd binary that should be accessible to generate it. The command would look like this if you wanted to create a new file (-c means create new file):

htpasswd -c /home/username/domain.name/.htpasswd user1

Or like this if you were adding a user to an existing file :

htpasswd /home/username/domain.name/.htpasswd user2