Searching Jekyll

2-minute read
Jekyll • CMS • Admin • Search

Using a static site generator like Jekyll for your personal blog brings a few new challenges in some areas. Searching, for example is not possible in pure HTML. There are a few different options to find posts on your website, though.

tl;dr

jekyll-lunr-js-search is great, just head over to GitHub and get started.

External Search Engine

Both Google and DuckDuckGo offer search engines for your own website which are more or less easy to integrate in your own site. Unfortunately, DDG did not seem to index my site {% post_link 2014-07-02-moving-to-jekyll since I installed Jekyll %} and this plugin a few weeks ago.

Besides that, integrating an external service ruins the whole point of being mostly independent with your site. Everything that’s on here should still work if the rest of the world collapses. Well, there are some videos and external photos that would not be displayed anymore but most of the content and functionality of the site would still be available.

Local Search Engine

So I started looking into search engines that work locally on my own server. Starting on Brett Terpstra’s site I found out that he uses a custom solution which basically works the same way the two following ones do. They all create an index file (search.json) which can then be used to filter all the posts based on a keyword with some JavaScript.

The documentation on this one is a bit minimalistic so I had a hard time integrating it into my site. If you’re more adventurous than I’m check out the project on GitHub.

Talking to Brett and Oliver Nightingale on Twitter I got pointed to this plugin based on lunr.js.

lunr.js is a simple full text search engine for your client side applications. It is designed to be small, yet full featured, enabling you to provide a great search experience without the need for external, server side, search services.

Here the documentation is way better and it’s rather easy to integrate. The only pitfall I ran into is the fact that it did not work for me when I added the search.min.js file at the and of my new search page. So I had to integrate it right above that script part. If you’re curious you can find my template on GitHub.