When building a website with Jekyll, customizing the 404 error page can greatly improve user experience. Instead of a generic message, a tailored 404 page with navigation links helps visitors find their way back to useful content.
Why Customize Your 404 Page?
A customized 404 page keeps visitors engaged and reduces bounce rates. It also reflects your site's branding and provides helpful links to guide users to relevant pages.
Creating a Custom 404 Page in Jekyll
To create a customized 404 page in Jekyll, start by adding a new file named 404.html in your site's root directory. This file will be automatically used when users encounter a missing page.
Step 1: Basic Structure of 404.html
Begin with the standard Jekyll front matter and basic HTML structure. Here's an example:
---
layout: default
title: "Page Not Found"
permalink: /404.html
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 - Page Not Found</title>
</head>
<body>
Step 2: Adding Navigation Links
Include links to popular pages or categories to help visitors navigate your site. Use a list for clarity:
Feel free to add more links based on your site's structure.
Step 3: Styling and Final Touches
Enhance your 404 page with CSS styles to match your website's design. You can include inline styles or link to an external stylesheet. Here's a simple example:
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
h1 { font-size: 3em; color: #333; }
a { color: #0066cc; text-decoration: none; margin: 0 10px; }
a:hover { text-decoration: underline; }
</style>
Complete your 404.html file by closing the HTML tags:
</body>
</html>
Conclusion
Creating a customized 404 error page in Jekyll enhances user experience and helps retain visitors. By including helpful navigation links and styling, you can make your error page both functional and attractive.