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 HTMLHyperText Markup Language. It’s the standard language for creating web pages. error page, instead of handling them dynamicallyActions or processes that occur in real-time, often without requiring a full page reload. For example, a search box that… 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.

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 FTPFile Transfer Protocol. A method for transferring files between a local system and a server over the internet. 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 indexA list or database used to make searching faster..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 configurationThe setup process where you specify the settings and options for how a software or system will operate. file. Most static hosting providers have a solution for that already.

Some examples are:

• Cloudflare Pages
• GitHub Pages
• Netlify

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 CDNStands for Content Delivery Network. It’s a system of distributed servers that deliver web content quickly to users base… solution out there. Look out for things like “Edge Rules” (CloudflareA company that provides services like security and website speed improvement. It acts as a protective layer between the … 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.