Creating a custom 404 page in Jekyll enhances the user experience by guiding visitors back to useful content when they encounter a broken link. Adding search functionality further helps users find what they're looking for quickly. This guide walks you through the process of creating a stylish 404 page with integrated search in Jekyll.

Designing the 404 Page

Start by creating a new file named 404.html in your Jekyll site's root directory. This page will display whenever a user visits a non-existent URL. Customize the content to match your site's style and include a friendly message, such as:

Oops! The page you're looking for doesn't exist.

Include a search form to help users find relevant content. You can design a simple form like this:

<form action="/search" method="get">

<input type="text" name="query" placeholder="Search our site...">

<button type="submit">Search</button>

Ensure your site supports search queries via the URL parameter query. You might need to configure your search page accordingly.

Implementing Search Functionality

If your Jekyll site doesn't have a search feature, consider adding one using a third-party service like Lunr.js or Algolia. These tools index your site's content and provide fast, client-side search capabilities.

For example, integrating Lunr.js involves:

  • Adding Lunr.js library files to your assets.
  • Creating a search index during site build.
  • Implementing a search results page that displays matching content.

Once set up, your search form on the 404 page can submit queries to this search page, allowing users to find relevant posts or pages easily.

Styling Your 404 Page

Use CSS to match your site's theme and make the 404 page inviting. For example, add styles to center the message and style the search form:

Example CSS:

.404-container {
  text-align: center;
  padding: 50px;
}
.search-form {
  margin-top: 20px;
}

Add this CSS to your site's stylesheet or within a <style> block in the 404.html file.

Final Tips

Test your custom 404 page thoroughly. Ensure the search functionality works correctly and that users can navigate back to your main content easily. Regularly update your search index to include new content, maintaining the effectiveness of your search feature.

By following these steps, you create a more user-friendly experience that helps visitors find what they need, even when they encounter a broken link.