Of course this is a big call, but having utilised various parts of this file on many occasions with large amounts of success, it sure does rank as an important resource, especially as server configuration is not my strong point.
So, what is this file I am talking about?
HTML5 Boilerplate Apache Server Configs
A word of warning, all the goodness in this file is for people using an Apache Server. If you happen to have a different server setup be sure to checkout all the other server configs maintained by the HTML5 Boilerplate community.
With over 980 lines of code it would be a little impractical to look over all the configuration options in this post but I have picked out 5 which I feel are worthy contenders to be part of your .htaccess
file.
So what does the .htaccess
file do?
The
.htaccess
file is a configuration file that can modify the configuration of the Apache Web Server to enable and/or disable additional functionality on a per-domain and even a per-directory level basis.
Where does the .htaccess
go?
You should upload your file to the exact directory you want it to modify. I generally add it to the root directory but you can add multiple .htaccess
files throughout your directories if needed. Also remember your .htaccess
file needs to be a plain text file.
5 Awesome .htaccess
snippets
Custom error messages/pages
To provide more information to people experiencing errors on your site you can easily adjust your .htaccess
file to point to a customised error page based on an error code rather than showing the default server error page.
Some Error codes that might be helpful:
400 – Bad Request
401 – Authorization Required
403 – Forbidden Page
404 – File not Found
500 – Internal Error
# ----------------------------------------------------------------------
# | Custom error messages/pages |
# ----------------------------------------------------------------------
# Customize what Apache returns to the client in case of an error.
# https://httpd.apache.org/docs/current/mod/core.html#errordocument
ErrorDocument 404 /404.html
Forcing https://
This is quite self-explanatory. If you need to redirect from http://
to https://
this simple rewrite does the trick.
# ----------------------------------------------------------------------
# | Forcing `https://` |
# ----------------------------------------------------------------------
# Redirect from the `http://` to the `https://` version of the URL.
# https://wiki.apache.org/httpd/RewriteHTTPToHTTPS
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
Suppressing / Forcing the `www.` at the beginning of URLs
This rewrite rules help make sure your files are only available under one URL.
# ----------------------------------------------------------------------
# | Suppressing / Forcing the `www.` at the beginning of URLs |
# ----------------------------------------------------------------------
# The same content should never be available under two different
# URLs, especially not with and without `www.` at the beginning.
# This can cause SEO problems (duplicate content), and therefore,
# you should choose one of the alternatives and redirect the other
# one.
#
# By default `Option 1` (no `www.`) is activated.
# http://no-www.org/faq.php?q=class_b
#
# If you would prefer to use `Option 2`, just comment out all the
# lines from `Option 1` and uncomment the ones from `Option 2`.
#
# (!) NEVER USE BOTH RULES AT THE SAME TIME!
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Option 1: rewrite www.example.com → example.com
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Option 2: rewrite example.com → www.example.com
#
# Be aware that the following might not be a good idea if you use "real"
# subdomains for certain parts of your website.
#
# RewriteEngine On
# RewriteCond %{HTTPS} !=on
# RewriteCond %{HTTP_HOST} !^www\. [NC]
# RewriteCond %{SERVER_ADDR} !=127.0.0.1
# RewriteCond %{SERVER_ADDR} !=::1
# RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
#
File access
Make sure people can’t browse through every directory on your server which can include sensitive data.
# ----------------------------------------------------------------------
# | File access |
# ----------------------------------------------------------------------
# Block access to directories without a default document.
Options -Indexes
Compression
All modern browsers support and automatically negotiate GZIP compression for all HTTP requests but it is our job to ensure that the server is properly configured. This snippet makes sure things are compressed when requested.
# ----------------------------------------------------------------------
# | Compression |
# ----------------------------------------------------------------------
# Force compression for mangled `Accept-Encoding` request headers
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Compress all output labeled with one of the following media types.
#
# (!) For Apache versions below version 2.3.7 you don't need to
# enable `mod_filter` and can remove the ``
# and ` ` lines as `AddOutputFilterByType` is still in
# the core directives.
#
# https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Map the following filename extensions to the specified
# encoding type in order to make Apache serve the file types
# with the appropriate `Content-Encoding` response header
# (do note that this will NOT make Apache compress them!).
#
# If these files types would be served without an appropriate
# `Content-Enable` response header, client applications (e.g.:
# browsers) wouldn't know that they first need to uncompress
# the response, and thus, wouldn't be able to understand the
# content.
#
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding
AddEncoding gzip svgz
To wrap things up
As I noted above, the snippets I have showcased are just the icing on the cake. The file has so many more and should be read by any developer keen to level up on server configurations.
If you have never tinkered with your .htaccess
file before I would highly recommend taking the time. With a few quick customisations you can potentially take your site to the next level.
Nice!
Great information for web developers….and thanks for the images too.
good article, makes me realise how much I don’t know!
thanks for the htaccess tips!
So What is this HTML5 Boilerplate Apache Server Configs?