Creating a custom 404 page

Sep 6, 2017 00:30 · 198 words · 1 minute read web apache webdev html quicktips

Introduction

If you’re here, I’m sure you know what a 404 page is so there’s no need for introductions. Activating your own custom 404 design takes less than a minute once you’ve got your page set.

You will go from this:

Default 404

To this:

Custom 404



Step By Step

1 - Start by creating your 404 page design. This is entirely up to you. (Get creative!)

2 - On the root folder of your website edit (or create) your .htaccess file with

nano .htaccess

3 - Add the following to the file and save it

ErrorDocument 404 /404.html


You’re done. Yes, it was that easy. Keep in mind you will have to change /404.html to whatever you named your custom page design.

This is what my .htaccess file should looks like afterwards:

.htaccess file



Protip - Absolute Paths

If your 404.html file relies on any external files like a background image or a stylesheet, make sure you place them all in a folder on the root directory of your website and use absolute paths when referencing them in your 404.html.

Using

<link rel="stylesheet" href="404/style.css">

instead of

<link rel="stylesheet" href="/404/style.css">

will not work when you hit a 404 while in a subfolder (eg.: http://cmiguel.com/something/nonexistentpage)