It's All About IT

A Complete Guide to .htaccess for Beginners

So What is Htaccess?

what is htaccess file

Htaccess is actually a config file for Apache Servers. It is used to control the behavior of the server. The server first looks for an htaccess file, follows the instructions, then shows the requested page. with extension .htaccess.

How to use it?

All you need to do is create a file with name .htaccess and place it in the root directory of your website.

What can you do with an htaccess file?

Directory indexing

By default, the index file is the homepage of any website. Directory indexing allows visitors to view a list of files in the directory not having index file. but you can also set a custom page as homepage of the website using the code below :

DirectoryIndex pagename.html

Manage Redirects

301 redirect with htaccess

Many times it happens that you have to change the permalink of a page. In that case, you need to redirect the old URL to the newer one. This is called 301 Redirect and it can be done as shown below –

 Redirect 301 /oldfile.htm /newfile.html 

Temporary Redirects: If you want to redirect users temporarily, then you can simply change 301 to 302 in the code above.

Setting a custom 404 not found page

setting a custom 404 page with htaccess

When you open a broken link or a page that doesn’t exist, the server shows 404 Error. If you want the server to show a Good Looking page, you can create a custom page like not_found.html and set it like this –

ErrorDocument 404 http://yoursite.com/not_found.html

Enable Gzip Compression

enable gzip compression to optimize your wordpress website

While Optimizing your website, you might land on “Enable Compression”. To serve files in compressed format, you need to tell the server like this –

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Leverage Browser Caching

We all know, once a website is opened in browser, it stores its images and scripts in the cache for faster loading next time. To tell the browser, how to cache all the files properly, you need the following code in htaccess file-

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Resolve Canonical Issue

resolve canonical issue with htaccess

When a website is accessible with both http and https, it is called canonical issue and is bad for SEO. You need to force the whole traffic on the same protocol, do it as below –

#force https:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
RewriteEngine On
RewriteCond %{HTTPS} on
RewriteRule ^ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
#Force www:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301,NC] 
#Force non-www:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example.com [NC]RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]

Access Control

You can control who can access your website, even if it is live on the internet. You can allow or block certain ip address as follows –

Allow from 122.132.1.2
 Deny from 25.132.6.3

Webpage Downloading instead of Opening in Browser?

Sometimes you may face this issue that you try to open a page of a website and it downloads.

You can fix this problem in .htaccess file, just add the following code into the .htaccess file

AddType text/html .html

Conclusion

Htaccess file is an important aspect in the case of websites hosted on apache servers. Each Web Developer should know about it.

Leave a Message

Registration isn't required.




By commenting you accept the Privacy Policy