Have you ever wondered how to create a “nice” or “clean” url such as the one for this page? Or wondered how to set a custom 404 page when users look for a page that isn’t there? Maybe you are trying to work out how to password protect directories on a web server. In this tutorial I’m going to tell you how to achieve all these things using a simple .htaccess file.

A what file?

A .htacces file. A .htaccess file is used by Apache (ie not Windows hosting) to define certain rules for the directory you place it in and all sub directories. Some things you should know about a .htaccess file are:

  • It is relatively powerful. You can really mess up a website if you do something wrong with this file.
  • Due to the fact it is a file extension and doesn’t have a file name you can’t create one directly in Windows. In this case I would advise creating a text file (such as htaccess.txt), uploading it to the server and then using your ftp, or other, program to rename the file to .htaccess.
  • Some ftp programs hide these files on the server. Usually they have an option to “show hidden files”. Make sure this is ticked so you can see the file.

Custom Error Pages

So lets get to it. Have you ever been on a website and got that annoying “Page Cannot be Found” message, otherwise known as a 404 error? Well you can change that and all other error pages by doing the following:

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html
# Or you can do:
ErrorDocument 404 http://progtuts.info/en/404.html
# Or even...
ErrorDocument 401 "Hold the phone! You're not a <a href="member.html">member</a>. You can't see this page"

Pretty simple eh!

Password Protect Directories

This is another common thing people do. If you want to restrict access to directories but don’t want to faff about making your own HTML form authentication then you can use .htaccess combined with a .htpasswd file.

.htpasswd

anmadno41:cFwiw18lMik6I

This is quite simple. Just as username and password. The password is encrypted, however, but don’t worry as there is a neat online tool to help with this.

.htaccess

AuthName "Restricted Area" 
AuthType Basic 
AuthUserFile /home/mysite/.htpasswd 
AuthGroupFile /dev/null 
require valid-user

Again this isn’t too hard. AuthName can be anything you want. Its just a name given to the restricted area. AuthType Basic just means we are using basic HTTP authentication. AuthUserFile is the full server path to your .htpasswd file, note this is not a url. The final line just means that any valid user can access the directory. You could change this to require user anmadno41 to limit it to certain users.

Redirects

Redirects with .htaccess are pretty simple.

Redirect /old/oldfile.html http://yoursite.com/new/newfile.html

Here is a cool trick though. Say you want to work on a new deisgn for your website but don’t want visitors to see it. You could just password protect it as above, or you could redirect visitors to an update page explaining you are updating the website while still allowing you to access the files.

order deny,allow
deny from all
allow from 12.34.56.78
 
ErrorDocument 403 /maintenance.html
 
<Files maintenance.html>
allow from all
</Files>

This would redirect all visitors to maintenance.html while allowing your IP to access the files. Remember to change 12.34.56.78 and maintenance.html to your own IP and file.

Protecting Files and Directories

Say you want to restrict access to certain files (such as logs and dat files) that normally could be downloaded by accessing them through the browser. You can do the following:

<Files ~ "\.(log|dat)$">
deny from all
</Files>

Or what if you don’t have empty index.html pages in your directories but want to stop people for browsing your directories.

Options All -Indexes
# Or maybe only hide certain files:
IndexIgnore *.gif *.jpg

Force Downloading of Files

Here is a cool trick. Have you ever had a problem visitors streaming your media files instead of downloading them. You can force them to download the files by changing the MIME types to octet-stream.

AddType application/octet-stream .avi 
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .mp3
AddType application/octet-stream .wma
AddType application/octet-stream .pdf

Preventing Hot Linking of Images

Say you run a site with loads of images and you don’t want people “hot-linking” to your images and stealing your bandwidth. You can use a simple bit of code to prevent that:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mysite.com/.*$ [NC]
RewriteRule \.(gif|jpg|png)$ - [F]

Remember to change mysite.com to your own website. Note that this technique can also be used to protect hot linking of other files such as Javascript and CSS files by adding the file extensions to the rewrite rule (eg RewriteRule \.(gif|jpg|png|js|css)$ - [F]).

Nice/Clean Url’s

So you’ve got this url that looks something like
http://www.mysite.com/index.php?page=blog
and you want it to look more like
http://www.mysite.com/blog/
So how do we do that?

RewriteEngine On
RewriteRule ^([a-zA-Z0-9]+)$ index.php?page=$1
RewriteRule ^([a-zA-Z0-9]+)/$ index.php?page=$1

Using the .htaccess file and some regular expressions we can make a clean url. I’m not going to explain regular expressions here as that is a whole other topic but what this code basically does it take the last part of the clean url (/blog/) and redirect it to index.php?page=blog without actually showing the messy url. Great!

Conclusion

So there you have it. The anatomy of a .htaccess file. Hopefully this will help all you webmasters, as it helped me, to discover the advantages of using a .htaccess file on your website. For further reading why not check out:
Comprehensive Guide to .htaccess
.htaccess Tips and Tricks

Related Posts

  • No Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. Comment by Yamada on September 16, 2008 9:33 am

    I just came from nettuts and this post looks very similar to this website over here.
    http://www.ragard-jp.com/en/tutorials/useful-htaccess-tricks-for-webmasters/

    Funny thing, only a day difference and both are in the same nettuts user link feed. Did you get some idea from that website? or did that website steal your post?

  2. @Yamada Thanks for your concern but I started writing this post a few days ago and only realised after I posted it on nettuts that there was a similar one there.

    It definitely wasn’t stolen from here and I definitely didn’t realise that post existed before I wrote this one.

  3. Comment by Yamada on September 16, 2008 11:25 am

    Good to know that! By the way nice tips!

  4. LOL, these “similar” .htaccess code snippets are all over the internet, they are all mostly from my original .htaccess tutorial that is now 15+ detailed tutorials on .htaccess

    I can always tell because there just isn’t anything like some of these snippets until I published that article. Noone had previously used the ErrorDocument 403 trick to redirect during maintenance, and the octet-stream force download was also not widely known. Those 2 particular bits of code are still at the .htaccess for webmasters tutorial, part 1 of the 15part series.

    @gilbitron
    No this is definately not stolen, I read similar articles every day practically and can tell you did some tests and know what you are talking about. I especially liked your initial explanation of what .htaccess files are and how to use them. Very helpful information for anyone curious about it.

    @Yamada
    I just checked out that ragard-jp.com tutorial and it has the exact same looking code snippets from the same htaccess for webmasters article.. Funny thing is, they named it “Useful htaccess tricks for webmasters” and my original article title? “htaccess Tutorial for Apache Webmasters”

    LOL, its all love guys, we need to share this info!

Leave a Comment

(required)

(required)