15+ Tips & Resources for Learning and using .htaccess – An Intro for Web Designers

Among all other elements of web design and coding, htaccess can be one of the most threatening. This is so because of the fact that .htaccess is an incredibly powerful tool and one that has the potential to completely break your site if you’re not careful.

Here are some basic htaccess techniques and tips to get you started. They’re not nearly as frightening as many people expect, and if you study the code for a few minutes, I am sure that you’ll quickly grasp exactly how it works.

Also, check the end of this post for some great resources on .htaccess. This post should be helpful for beginners, Designers, and even Developers of all experience levels!

Note: Please check with your web hosting provider if you have issues with your .htaccess file, because different hosts handle certain things differently, and some won’t allow certain techniques to be used for whatever reason.

QUICK TIP – If you have never used an .htaccess file before, and you are using Dreamweaver, you may have to add the .htaccess extention to the ‘file types’ in Dreamweavers Preferences, that way you can open the file and view it in Dreamweaver, It should look just like a plain text file. Also, .htaccess files typically are not very long, only several lines of code, Hopefully the resources at the bottom will help you if you get stuck and don’t know what to do :).

1. Creation of a custom error page:

htaccess on a Linux Apache server makes it easy to create your own custom error pages. Just create your custom error page files and then add following code to your .htaccess file:

ErrorDocument 401 /401.php

ErrorDocument 403 /403.php

ErrorDocument 404 /404.php

ErrorDocument 500 /500.php

ErrorDocument 401 /401.php

ErrorDocument 403 /403.php

ErrorDocument 404 /404.php

ErrorDocument 500 /500.php

(Obviously you should replace with your own file path and name.)

2. Prevention of directory browsing:

If you don’t include an index file in a directory, visitors can browse the directory itself. But preventing that is as easy as adding a single line to your .htaccess file:

Options All -Indexes

3. Setting the default page of each directory:

If you don’t want to use an index page in each directory, you can set the default page visited when someone reaches that directory by adding this:

DirectoryIndex news.html

DirectoryIndex news.html

(You will have to replace the “news.html” bit with whatever you want to use as the default.)

4. Setting up a 301 redirect:

If you move around the structure of your site and need to redirect some old URLs to their new locations, the following bit of code will do so for you:

Redirect 301 /original/filename.html http://domain.com/updated/filename.html

5. Compressing file output with GZIP:

You can add the following code to your htaccess file to compress all of your JavaScript, CSS and HTML files using GZIP.

<IfModule mod_gzip.c>

mod_gzip_on         Yes
mod_gzip_dechunk    Yes
mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler   ^cgi-script$
mod_gzip_item_include mime      ^text\.*
mod_gzip_item_include mime      ^application/x-javascript.*
mod_gzip_item_exclude mime      ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

<IfModule mod_gzip.c>

mod_gzip_on   Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file   \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler  ^cgi-script$

mod_gzip_item_include mime  ^text\.*

mod_gzip_item_include mime  ^application/x-javascript.*

mod_gzip_item_exclude mime  ^image\.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

6. Redirecting to a secure https connection:

If you want to redirect your entire site to a secure https connection, use the following code.

RewriteEngine On

RewriteCond %{HTTPS} !on

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

7. Blocking script execution:

You can stop scripts in certain languages from running with this code:

Options -ExecCGI

AddHandler cgi-script .pl .py .php .jsp. htm .shtml .sh .asp .cgi

(Options -ExecCGI

AddHandler cgi-script .pl .py .php .jsp. htm .shtml .sh .asp .cgi

Just replace the types of scripts you want to block).

8. Forcing a file to download with a “Save As” prompt:

If you want to force users to download a file instead of opening it in their browser, use this code:

AddType application/octet-stream .doc .mov .avi .pdf .xls .mp4

9. Restricting file upload limits for PHP:

You can restrict the maximum file size for uploading in PHP, as well as the maximum execution time by,

php_value upload_max_filesize 10M       /Max file size for uploading

php_value post_max_size 10M             /Max size for post data

php_value max_execution_time 200        /Max time in sec for running before termination

php_value max_input_time 200            /Max amount of time in sec for parsing input

php_value upload_max_filesize 10M

php_value post_max_size 10M

php_value max_execution_time 200

php_value max_input_time 200

10. Enabling File Caching:

Enabling file caching can greatly improve your site’s performance and speed. Use the following code to set up caching (changing the file types and time values to suit your site’s needs). Time shown for Max age is in Seconds.

#cache html and htm files for one day

<FilesMatch “.(html|htm)$”>

Header set Cache-Control “max-age=43200”

</FilesMatch>

#cache css, javascript and text files for one week

<FilesMatch “.(js|css|txt)$”>

Header set Cache-Control “max-age=604800”

</FilesMatch>

#cache flash and images for one month

<FilesMatch “.(flv|swf|ico|gif|jpg|jpeg|png)$”>

Header set Cache-Control “max-age=2592000”

</FilesMatch>

#disable cache for script files

<FilesMatch “\.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

#cache html and htm files for one day

<FilesMatch “.(html|htm)$”>

Header set Cache-Control “max-age=43200”

</FilesMatch>

#cache css, javascript and text files for one week

<FilesMatch “.(js|css|txt)$”>

Header set Cache-Control “max-age=604800”

</FilesMatch>

#cache flash and images for one month

<FilesMatch “.(flv|swf|ico|gif|jpg|jpeg|png)$”>

Header set Cache-Control “max-age=2592000”

</FilesMatch>

#disable cache for script files

<FilesMatch “\.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

11. Protecting your site from hotlinking:

The last thing you want is for those stealing your content to also be able to embed the images hosted on your server in their posts. It takes up your bandwidth and can quickly get expensive. Here’s a way to block hotlinking within htaccess. You will have to replace the domain\.com with your own domain name.

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://([ -a-z0-9]  \.)?domain\.com [NC]

RewriteRule \.(gif|jpe?g|png)$ – [F,NC,L]

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://([ -a-z0-9]  \.)?domain\.com [NC]

RewriteRule \.(gif|jpe?g|png)$ – [F,NC,L]

12. Disguise your file types:

You can disguise your file types by making them appear as PHP files. Just insert this little in:

ForceType application/x-httpd-php

Even MORE .htaccess Resources!

Hope all of these resources help you on your travels!

Remember! With great power, comes great responsibility!

How to use .htaccess

Intro to .htaccess

Comprehensive guide to .htaccess

Cheatsheet for .htaccess

Using htaccess Files for Pretty URLS

10 awesome .htaccess hacks for WordPress

I hope that these .htaccess resources will help you on your way to become a .htaccess ninja! Good luck on your journeys! Also, remember to master .htaccess you will probably need to read up on Regular Expressions and practice using them to truly understand them.

If you found this post useful, please leave us a comment! Also, Subscribe to the blog for more great posts in the future!