Password protecting your development site using .htaccess / .htpasswd

You may want to restrict the development site from the search engine or from direct access. One of the popular ways of doing so is to use Apache2 Basic Authentication.
Here we will be discussing on how to password protect your development site using Apache2 Basic Authentication which makes use of .htaccess & .htpasswd files.

Steps:

1. Create & upload the .htaccess file to the root of your dev site with the following content:

AuthName "Authorisation Required"
AuthUserFile "/path/to/.htpasswd"
AuthType Basic
require valid-user
ErrorDocument 401 "Authorisation Required"

Notes: If .htaccess file already exists then you can add the above code on the top.
Also, note that omitting ‘ErrorDocument 401 “Authorisation Required”‘ line can lead to 404 error.
2. Create & upload the .htpasswd file to ‘AuthUserFile’ path with the following content:

foo:$apr1$yB1.9vIT$IVVBmq5vMauwsNR8CZdHQ.

Notes: Where ‘foo’ is the username and ‘$apr1$yB1.9vIT$IVVBmq5vMauwsNR8CZdHQ.’ is the MD5 encrypted password of ‘bar’.
That was just an example, in fact, you can use any username/password combination.
In order to create an encrypted password, you can use some free online tool like:
http://www.htaccesstools.com/htpasswd-generator/

3. Now try to visit the dev site, you will get the screen similar as:

Apache2 Basic Authentication
Apache2 Basic Authentication

And you will only be able to browse the dev site once the correct username/password are entered.

Hope this helps you in password protecting your site.