Provide a sane way for a user to search our static Jekyll blog and view a bookmarkable page containing the relevant results.
For the eager-beavers among you, take a look at the Installation details at the bottom of the post.
“Transform your plain text into static websites and blogs.”
Simply put, that is Jekyll. This post isn’t an intro to Jekyll or even a sales pitch for Jekyll. The Jekyll site does a good enough job of that by itself.
This post will, hopefully, provide a needed solution for people (power users?) trying to get more out of Jekyll. Well, more than it was intended for…
Static with a side of dynamic please
But wait. We kinda liked that little bit of the dynamic-ness that a nifty bit of WordPress PHP could provide.
Searching. A common need for a blog. However, the very concept of “searching” means dynamic results. Query terms that we can not possibly foresee the user providing. Once our site is compiled and sent to the webserver, that’s it. No backend logic to handle a search query.
We need to get input from the user. We can do this easily enough by outputting a HTML form element in our template, like so:
This is just a standard HTML form, which when submitted, sends the value of the “query”, input in the URL, to the “/search” page.
You can place this anywhere, maybe the header?
Next up, our
We need a place to output our search results, which we’ll place in our
You might be wondering why we’re outputting an empty div in the HTML. Well, like I said earlier, we can’t know what the user will be searching for, so we have to work with what we’re given. Which unfortunately, isn’t much.
As Jekyll compiles our site for us, it allows us to place special Liquid templating logic in any file, and it’ll automatically process them when it parses & compiles your site. Handy.
search.html, right below the
Place this below the script tag above:
We tell the search plugin where to put our results with the
selector option. We can then also tell it which parts of the post to search in, ie. you may want to limit searching to the post titles or, let the user search post content as well. If you don’t provide this
properties option, the plugin will only search the “title” property of each post.
We can also pass in a custom message for when there were no results found from the user’s search.
Now when the user submits the search form, they are taken to a search page, which will list the relevant results and let them click-through to the posts!
A splash of dynamic-ness for your static Jekyll site.
The output from the plugin (for each search result) looks like this:
I've set up a sample demo of this functionality, which can be viewed at online.
The code for the demo (and the code you'll need for your site) can be found on GitHub.The important files
_includes/header.html - This is where we output the search form
With a small blog, the amount of data we’ll be embedding into
search.html will be minor and nothing to worry about.
Once your blog starts to grow, you may be concerned with the amount of data that’s compiled. My advice would be to drop the
content key from the compilation. If you wanted to do that, your new loop would look like this:
You’d then end up with a lightweight data structure for searching. Obviously this means that we then can’t use the
content for searching purposes, so if you do pass in
content in the
properties argument for the plugin, it’ll simply be ignored.
To clarify, I’d really only resort to doing this if you noticed the perceived page load speed decrease significantly. This would be a premature optimisation if employed too early.
I'm available for hire