lunr.js and Jekyll

I recently spent some time hooking up a Jekyll site with lunr.js. Lunr.js is a full text client-side search engine and it works rather well. It took me a few tries to understand how lunr works and then translate that into a Jekyll site (I had some help from this post) so here’s a walkthrough of I how got it all connected.

Tell lunr all about your fields

I started off by creating a file called, lunr-feed.js and adding front matter since I’ll be using logic to loop through my posts.

Next, I declared fields to describe my data (and by data I mean my posts). I can customize the field names, but it’s important to keep the id field (this acts like an unique identifier). I can also add a boost to each field. A boost tells lunr that I want it to favor this field that much more in the context of searching. In my case, I wanted lunr to focus on the content of my posts, so I applied a boost to that field.

Now give lunr your data

Next, I gave lunr my data. This is the data that I want lunr to search and it corresponds with the fields that I defined above. And to keep my data straight, I increment a count to build the id as my unique identifier for each post.

By adding my fields and data, lunr passes it through its pipeline, processes the data, and builds an object that I’ll query later.

Build a data reference for lunr

To complement the data that I gave to lunr, I created an object that contains basic information about each post. This is so I can reference it against lunr’s search results because lunr returns the reference id as a search result and not all the data I gave it.

Query lunr and the match results

Finally, it’s time to query lunr aka query that index object lunr created from my fields and data. Lunr returns id numbers as search results (in order of most relevant) and then I use that id as an index number for my store object so I can output details about each search result.