How to Add a Custom 404 Page in GitHub Pages

In this post I will show you how you can add a custom 404 page to a website that is hosted on GitHub pages. This will replace the default 404 page that GitHub pages displays with your own custom 404 page.

GitHub pages is a Static files hosting service by GitHub that allows you to host and publish your static website files for free. It also gives you a github.io subdomain from where you can access the files hosted on your GitHub pages repository.

Related Posts

What is 404 Page & What it Does?

A 404 Page is an error page that a website or a blog displays when it is unable to find the URL that you typed in the browser, Like if you enter a URL from my blog xcattx.com that doesn’t exist or the URL has been deleted then you will get an 404 error message.

404 page not found

It basically means the content / URL is either removed by the admin or the URL didn’t existed in the first place. A 404 page will inform the user that the page he is trying to access doesn’t exist and the user should go to the home page.

Is 404 Page Necessary for a Website?

Yes it is, without a 404 page your users will be confused if they visit a page that doesn’t exist. Because by default your website will just show a blank page which doesn’t inform the user of what happened, whether its a problem with the website or a problem on the users end.

So having a 404 page will properly inform the users about the non-existent URL and will ask them to go to the homepage of your website.

Creating a HTML 404 Page

To Create a custom 404 page for GitHub Pages you don’t need to have a lot of coding knowledge, all you need to know is a little bit of html and css ( just the basics ).

You can also use the simple html code given below that will display a 404 error warning with a link to the homepage. Or you can use your own template.

<!DOCTYPE html>
<html>
<head>
  <title>404 Page Not Found</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>404 Page Not Found...</h1>
<h2>The page you are looking for doesnt exist anymore, pls go to the <a href="https://example.com/">HOMEPAGE</a>

</body>
</html>

The above code displays a 404 page not found warning in h1 tags and also gives you the link you need to follow to go to the homepage of your website, just change the example.com with your own domain name. To add this 404 page template to your website just copy it by clicking the code.

Deploying Custom 404 Page on GitHub Pages

After copying the 404 page template, you need to log in to your GitHub account and go to the repository where you have your website hosted.

Now here click on the ‘Add File’ button, after that click on ‘Create new file’ option to create a new file inside your repository.

Create a new file in GitHub

First you have to name the new file, you have to name it ‘404.html‘ and nothing else. After that below in the editor enter the 404 template that you copied , change the things you want to change from the 404 template and after that scroll down and click on ‘Commit New File’ button to publish the changes.

Creating 404.html page in GitHub

Now it will take a little bit of time for the changes to appear so after a few minutes try out the 404 page by typing a random URL with your domain name. Like for example xcattx.com/random-something. You should now get your own custom 404 page showing up instead of the default 404 page by GitHub.

Conclusion

Adding a custom 404 page to your GitHub pages website is very easy and takes just a few minutes. If you liked the post then make sure to share it with others, thank you.