How Do You Make a Helpful 404 Page in Jekyll

What Is a 404 Page and Why Does It Matter?

A 404 page appears when someone tries to visit a link on your site that doesn’t exist. Maybe they typed the wrong URL, clicked a broken link, or landed on an outdated bookmark. Without a custom 404 page, users might see a plain error screen—or worse, leave your site.

With Jekyll, you can easily build a custom 404 page that keeps visitors engaged and helps them find what they’re looking for.

Does Jekyll Support Custom 404 Pages by Default?

Not exactly. You need to manually create a file called 404.html and place it in the root directory of your site. GitHub Pages and other static hosts recognize it automatically when someone hits a broken link.

How to Create a Basic 404 Page in Jekyll

Step 1: Create a File Named 404.html in the Root Directory

/404.html

Step 2: Add Front Matter and Basic Content

Here’s a simple starting template:

---
layout: page
title: "404: Page Not Found"
permalink: /404.html
---

<h2>Oops, this page doesn't exist.</h2>
<p>The link you followed may be broken, or the page may have been removed.</p>

<p><a href="/">Return to homepage</a></p>

Save the file. That’s it. You now have a working custom 404 page.

What Should You Include in a Good 404 Page?

• A short, clear explanation of the error

• A link back to your homepage or blog index

• Optional: a list of recent posts or popular pages

• Optional: a search bar (if your theme supports it)

Example With Extras:

<h2>Page Not Found (404)</h2>
<p>Sorry, we couldn’t find that page.</p>

<p><a href="/">Back to Home</a> or try one of these:</p>

<ul>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
  <li><a href="/faq/">FAQ</a></li>
</ul>

This helps users navigate out of a dead-end.

Design Tips for Your 404 Page

• Keep the tone friendly—not robotic or technical

• Use your blog’s styling (header, fonts, spacing)

• Use your layout: page to maintain consistency

• Make sure the page has a working permalink: /404.html

How to Test Your 404 Page

After deploying, visit a URL that doesn’t exist on your site, such as:

yoursite.com/this-page-does-not-exist

You should see your 404 page appear automatically.

Can You Add Images or Styling?

Absolutely. Add a fun image, a logo, or custom CSS for your 404 page. For example:

<img src="/assets/img/lost.png" alt="Lost robot" style="max-width:300px;">

Make the page feel like part of your site—not a random error screen.

Why Is This Useful for Beginners?

• You improve the experience without learning JavaScript

• You practice making standalone pages

• You make your site feel complete and polished

Bonus: Add a List of Recent Posts on the 404 Page

You can use Liquid to show your latest blog posts automatically:

<h3>Recent Posts</h3>
<ul>
  {% for post in site.posts limit:5 %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

This keeps users engaged and helps them explore your blog.

Conclusion: A Custom 404 Page Is Easy and Valuable

You don’t need advanced skills to create a user-friendly 404 page in Jekyll. Just create one file, add some links, and make it useful. It's a small touch—but it makes a big difference.

So if your site doesn’t have a 404 page yet, now’s the perfect time to build one. You’ll never lose a visitor to a dead end again.