How to Implement Search on a Jekyll Site

The basic way searching works is that you create an index of all content on a site you want to search, then the search query is checked against that index. On something like a WordPress site, this query is checked against the database, which is a defacto index. Google does its own indexing of your site, so the Google queries are checked against Google’s index (likely also stored in a database).

Since Jekyll sites are static (meaning that they are only files, no databases included) there is no database to search. That leaves us with two options:

  1. Set up a Google Custom Search Engine. Google will index the site for you and display the results.
  2. Create an index on your own and make sure your search queries check against that index.

I love Google CSE, but I decided to go with the second route this time. I used Mat Hayward’s Jekyll Search scripts to do the heavy lifting, but I edited them to suit my needs. It is lightning fast!

These scripts:

  • Generate a JSON file of my site contents when the site is built
  • Compare the search query to the contents of the JSON file
  • Return the results based on a template

Jekyll Search, image from Mat Hayward

I modified the way the dates are formatted, how the excerpt gets put into the JSON file, the output styles, and put in a conditional for external link posts.

See it in action on my search page →

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: