Jekyll is a great tool to build web sites, unfortunately there is no built in search. This post will describe how to create one a basic search using JSON and jQuery.

This search works great for users using your site to search (like the one above this post). Unfortunately, with this method, Google does not understand that this is a site search. If having your search show up in Google results, this may not be for you.

Step 1: Create search.json

There are quite a few methods to create a search.json file. For me, I wanted to use built in Jekyll methods (no plugins). For that, I based the code from JSONify your Jekyll Site as well as other aspects of my site. The new code will look for attributes in my post like this sample from my drafts template:

Here is a sample of my final code. Pressing on the image will take you to the file in GitHub:

Step 2: Update your HTML code

Next, we need to update the search form :

Step 3: Create your search.json page

Thirdly, we need to create a basic html page that basically has our title, and a div to hold the jQuery results. Here is the code:

Step 4: Add the jQuery to your site

To query the search.json, I used jQuery’s getJSON method. For this, you will need the below code first:

Function 1:

Function 2:

This wrapped up the post on how to easily add a search to your Jekyll site.

Resources

Below are other search alternatives, and built in jQuery code that helped in my development.