Setting Up a Custom 404 Page with GitHub Pages

In this article, I’ll be showing you how to create a custom error 404 page in GitHub Pages, a static site hosting service that allows you to publish and host your web pages through GitHub.

Table of Contents

• How Does GitHub Pages Work?
• Setting Up GitHub Pages for Your Website
  • Creating Your GitHub Pages Repository
  • Configuring Repository Settings
  • Benefits of Using GitHub Pages
• Why Is a 404 Page Important?
  • Understanding 404 HTTP Status Codes
• Essential Elements of Effective 404 Pages
• Creating Your Custom 404 Page in GitHub Pages
  • Step-by-Step Implementation
• Conclusion

How Does GitHub Pages Work?

To break that down quickly: a static site is a website made up entirely of HTML, CSS, and JavaScript files. Everything the site needs to render is contained within these files, so there’s no need for server technology like PHP, Node.js, or Python. If the static site needs extra data from a server, it makes an asynchronous HTTP request with tools like fetch api or axios. And you’ll probably want to make sure that static site has a 404 page.

Displaying a 404 error page on your site is sort of like delivering bad news—the tone and manner of your delivery can determine if the person receiving the news will either be upset or be ready to agreeably look for another solution. After putting in all the hard work finding the best blogging platform, you don’t want a 404 to let you down.”Fortunately, GitHub Pages makes creating one a walk in the park.

Setting Up GitHub Pages for Your Website

Hosting your site on GitHub Pages is as easy as signing into GitHub and creating a new repository.

Creating Your GitHub Pages Repository

Your repo name should have the following format: <your github username>.github.io.

Add files to your repo. You can do this either by creating the files locally and pushing to remote or by creating the files directly on GitHub.

Go to the Settings tab of your newly created repository.

Scroll down to the GitHub Pages section.

Here, you can choose the branch you want to serve your pages from, the root directory, and even select a Jekyll theme. If you already have a custom domain name, you can add it here.

By adding a custom domain name, you can access your site using yourdomainname instead of your github.io domain.

That’s all! Your site is now ready to be published. Visit <your github username>.github.io to see your new website.

Configuring Repository Settings

You can make changes to your site whenever you choose. They become available immediately after you push/merge to the branch you’ve chosen to serve your pages from.

Benefits of Using GitHub Pages

Using GitHub Pages for your static site gives you some nice perks:

• GitHub Pages is free to use. No coughing up extra cash just to host some basic web pages.
• You can use it to host websites like single-page applications or blogs.
• You can add a custom domain name to your site.
• You can enable HTTPS for your domain in just one click.
• You get the added advantage of managing your site with Git. Version-controlling your website becomes a piece of cake.

Why Is a 404 Page Important?

The 404 page is a famously dreaded sight across the internet. It’s a page that neither website users nor owners like to see, but it’s an unavoidable one. Its purpose is to inform a user that the page they’re looking for doesn’t exist.

Think about it: it isn’t every time you go into a store that you find everything you’re looking for. Certain items may be sold out or perhaps the store never sold them to begin with. That’s exactly what happens on the web. Perhaps the page’s URL changed, breaking an old link, or maybe the page was removed altogether. A user could have manually input the wrong URL to begin with. However a user has arrived at a particular URL, the requested web page doesn’t exist.

Understanding 404 HTTP Status Codes

Specifically, 404 is an HTTP status code for a “Resource Not Found” or simply “Not Found” error. It applies to all kinds of resources on the web, including HTML files, CSS files, JavaScript files, documents, images, and just about any other file that could be requested from a server.

How you as the webmaster choose to convey a 404 error is very important. It can either improve your user’s experience on your site or make it worse.

Essential Elements of Effective 404 Pages

At the end of the day, what’s on your 404 page is up to you, but I can give you a few tips to make it as palatable as possible for your users:

• First and foremost, a 404 page should return with an actual 404 HTTP status code. This is important so web crawlers like Google’s bot don’t incorrectly index an erroneous page as a valid page, as this can negatively impact your SEO.
• The 404 page should make it clear to the user that there’s a problem. This can be achieved by making the 404 or Not Found message prominent on the page.
• The page should offer a way out to the user. Unless you want the user stuck on your error page or want them to close your site immediately, your 404 page should provide them with a means to navigate away from the page. Add an obvious link to your site’s homepage to somewhere on the error page, or you can suggest links to pages that might be similar to what the user was looking for in the first place.
• You can provide a way for users to report a broken page, enabling you to quickly fix any issues.
• Add a search bar for users to find other things they might be looking for.
• Make the design pleasing to the eye. A 404 page is still a part of your website, so you should put as much thought into its design as you have for other valid pages. The page should carry elements of your brand, and not look like a desert island.

GitHub’s very own 404 page is a good example of what a 404 page should look like. The error code and message are both prominent on the page, and there’s a search bar to help you find other content.

If you don’t add a custom 404 page to your GitHub Pages site, then by default GitHub displays the following 404 page:

Not bad, eh? But not good enough for your brand.

Creating Your Custom 404 Page in GitHub Pages

Fortunately, GitHub also understands the importance of a 404 error page, and provides developers an easy way to add one to their GitHub-hosted pages. Let’s look at how you can add your own custom 404 page.

Step-by-Step Implementation

Create a new file in the root of your repository and name it 404.html.

Then go on to add content for the 404 page as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Chango&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <style>
        body{
            background-image: url("https://images.unsplash.com/photo-1616235132417-99f443954d2e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
            background-size: cover;
            font-family: 'Roboto', 'sans-serif';
        }
        main{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .header404{
            font-family: 'Chango', cursive;
            font-size: 48px;
        }
        .content404{
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <h4 class="header404">404</h4>
        <div class="content-404">
            Uh-oh! We couldn't find the page you are looking for.
        </div>
        <p>
            <a href="/">Check our home page</a>
        </p>
    </main>

</body>
</html>

Commit your changes, then try to visit a page that doesn’t exist on your site, eg,username.github.io/a-random-page-that-doesn't exist. A page like this should appear:

Conclusion

Hopefully, this article has shed some light on the importance of a 404 page and why you should put some effort into branding it as you would other pages of your website. When properly done, a 404 error page can be a good way to increase your website’s conversion rate.

Unlike many other host servers where you have to tinker with .htaccess or other kinds of configuration settings to handle 404 error pages, GitHub Pages makes it incredibly easy. All you need to do is add a single file, and you’re good to go.

If you’re stuck for ideas on what your 404 error page can look like, you can always look around for some 404 inspiration.