4 web server rules you need today

This post uses Apache examples but I’ve also provided links to Nginx documentation as these two web servers account for about two-thirds of websites at the time of this post. The concepts are similar between web servers with variance in syntax and location of web server rules.

Not sure which web server your site is running? Check this web server utility.

colorful feather logo of Apache web server

What are web server rules?

Web server rules are instructions for the web server, directing it what to do with requests to your website like loading an image, redirecting a URL, denying access to content and serving error messages.

We’ll be reviewing the following web server rules:

  1. Redirect a single page request
  2. Redirect from one file path to another
  3. Turn off directory browsing
  4. Add custom error pages

Apache web server rules live in an .htaccess file located in the website’s root directory. If an .htaccess file doesn’t already exist, you can create one using a code editor and upload it to your web server. The file must start with the . character and does not have a file extension.

Web servers respond to each browser request with a code. The most common response is a 200 which means the request is successful and the web server responds by serving up the requested content like an HTML page, image or CSS file. Each rule starts on a new line.

You can see the total number of requests each webpage makes by opening developer tools in your browser (F12) and looking at the “Network” tab as you request a URL.

screen shot of the network tab in Firefox developer tools displaying 6 200 responses to content requested for a page on domain racheleditullio.com
Network tab in Firefox developer tools

Redirect a single page request

Web server Redirect rules generally respond with either 301 (permanent redirect) or 302 (temporary redirect). The following redirect rule returns a 302 response to the browser:

Redirect 302 /story-slides/index.html /talks/

Instead of loading the requested URL https://racheleditullio.com/story-slides/, the web server redirects automatically to https://racheleditullio.com/talks/.

Network tab in developer tools displaying a 302 response to domain request racheleditullio.com and the 200 response after redirect.
302 redirect from one page to another

How To Create Temporary and Permanent Redirects with Nginx

NOTE: 301 permanent redirects get cached by the browser and can be very hard to clear. Always create and test 302 redirects, changing to 301 once you’ve tested the rule is working correctly.

Redirect from one file path to another

What if you want to redirect all requests for a site or directory? When I consolidated my blog with this website, I set up the following RewriteRule rule on the old domain:

RewriteRule ^(.*)$ https://racheleditullio.com/blog/$1 [R=302,NC,L]

Requests for posts on the old domain are sent to the new-domain/blog/the-requested-file-path/.

Example: https://www.fishyux.com/blog/2016/03/twitter-adds-alt-text-authoring-for-some-users/

Network tab in developer tools displaying a 302 response to domain request www.fishyux.com and the 200 response after redirect.
302 redirect from old domain to new domain

Creating NGINX Rewrite Rules

Turn off directory browsing

Any website directory that doesn’t load a default web page may list its contents instead. Have you tried going to your images directory? You might see something like this:

a default directory listing of image files
Files in the /images directory

Add this directive to your .htaccess file and the server will block directory browsing:

Options -Indexes

The browser now returns a 403 code, access to the requested resource is forbidden.

Web page and network tab in developer tools displaying a 403 response
403 browser response

Nginx – Disable directory listing

Add custom error pages

Web servers are setup with default error pages for some response codes like 403 and 404. Give your site that finishing touch with custom error pages. Add a directive for each error code you want to customize:

ErrorDocument 404 /404/

Include the response code and the page that should load instead.

Example: https://accessibleweb.net/foo/

Web page and network tab in developer tools displaying a 404 response - page not found
Custom 404 error page on accessibleweb.net

How To Create Custom 404 Page in NGINX

Have any questions or comments? Hit me up on Twitter.