This website runs completely static. Learn how

404 Pages for Static Sites

It’s fair to say that almost everyone has received a ‘404, Page not found’ error when browsing through web pages on the internet. For those unfamiliar, this means that the page you were trying to access is either broken or doesn’t exist. 

The 404 error code can be distracting for visitors browsing through your site. It takes them to a separate web page that’s different from what they were expecting. More importantly, it breaks their flow.

For this reason, it’s essential to have a good 404 page for your website to ensure a good user experience. 404 pages are not just for dynamic sites. In fact, it’s easy to set up 404 pages for static sites. Additionally, it’s also recommended to handle 404 errors through a custom static HTML error page, instead of handling them dynamically on your site. 

This article will take a closer look at what 404 pages are and how you can set them up on static sites. We’ll also show you how you can skip 404 error handling for static files on your site.

What are 404 pages?

A 404 page is simply a page not found error. This means that when you access a website or open a link, the server wasn’t able to find the page you were looking for.

404 pages

For instance, if you visit Google.com, the Google server will know that you want to access their main search engine page. This generates a request to which the server responds by sending you back the webpage you were looking for. This type of communication between the user and the server is known as HTTP. 

404 errors are displayed regardless of the web browser you use – whether it’s Firefox, Chrome, or DuckDuckGo. This is because even though you’re connected with the server, the page you’re trying to load is not working or doesn’t exist on the internet space.

Most of the time, the reason for a 404 error page is a simple typo error made by the visitor in the URL address when accessing the web page. However, it can also be a broken link to a page that no longer exists.

404 error pages are not necessarily a bad thing. Done right, they can be pretty handy for redirecting visitors back to your website. In fact, 404 pages can help enhance user experience on your website as it’s useful for when people share broken links or links with typos.

How to set up 404 pages for static sites

One of the easiest ways to modify your .htaccess file is by using cPanel’s file manager. All you need to do is follow the instructions below. Additionally, you can also upload the .htaccess file through an FTP client. 

You can create and set up 404 pages for your static site using cPanel and modifying your .htaccess file. Here’s how:

Start by logging into your cPanel to access cPanel’s file manager. Next, go Files → File Manager and go to the root folder for the website. 

Click on the Settings options to show different preferences and then tick the checkbox next to Show Hidden files and click the Save button to continue.

Now, you’ll have access to the .htaccess file of your website. Right-click on the .htaccess file and click on the Edit button. You can set a 404 error message here in the .htaccess file that will be displayed to visitors who mistyped a web address or for when a web page is down.

If you want to catch 404 errors on your static site, all you have to do is enter the following code in your .htaccess file:

ErrorDocument 400 http://www.example.com/error.html

Once you’re done, click on the Save Changes button to continue. 

This lets you serve a custom 404 page. Then, all you have to do is create the 404 error page you want to show visitors.

This way, you can replace a bare-bones 404 Page not found error page with one that’s more useful. For example, you can leave a helpful message on your error page that lets users know what happened and what they can do next.

You might also consider adding a contact form or a feedback form to your 404 page to make it easy for visitors to get in touch with you. Check out our roundup of the 7 Tools to Use Forms on a Static Site for more information.

How to skip 404 error handling for static files

WordPress by default handles all requests using the .htaccess file with the index.php file. This is great because it lets you use permalinks and different kinds of redirections to your advantage. 

This works great but isn’t as impressive because it causes your server to use more resources than required. When handling missing static files such as the 404 error, WordPress can cause your server to allocate more resources than needed towards handling 404 errors on your website.

Here, we’ll show you how you can skip WordPress handling of static files.

Navigate to the .htaccess file again, similar to how we showed you earlier. You can use cPanel’s admin manager to open the .htaccess file and paste the following code at the start of the document:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(robots\.txt|[a-z0-9_\-]*sitemap[a-z0-9_\-]*\.(xml|xsl|html)(\.gz)?)
RewriteCond %{REQUEST_URI} \.(css|htc|less|js|js2|js3|js4|html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip)$ [NC]
RewriteRule .* - [L]
</IfModule>

Once you’re done, click on the Save Changes button to continue. This will disable WordPress’s ability to handle a 404 error and not cause it to put unnecessary load on the site’s server. Adding this snippet of code to the .htaccess file can tell WordPress that all requests that end with a static file extension are handled directly.

What to do if you are using a static hosting provider or CDN?

As you may know, you can not create and use .htaccess files on most static hosting providers as there is no Apache server installed to recognize and use your configuration file. Most static hosting providers have a solution for that already.

Some examples are:

In most cases, you can simply upload a custom 404.html file and configure it within the settings. This is a feature that is also included in almost any CDN solution out there. Look out for things like “Edge Rules” (Cloudflare or BunnyCDN for example).

Conclusion

Once you’re done setting up 404 error pages on your website, you should handle them through a custom HTML static page. This can help prevent unnecessary load on the server which, in turn, will improve response time and speed up user flows on your website.

Still not sure?

Still not sure?
Start with the free version for Simply Static
When you are ready to be a pro – come back!🎩

Grab the free trial version