Any blog or documentation website needs Search functionality. You can achieve this in many ways, and most likely a server-side solution will be chosen. However, if you don’t want to deal with any backend, you can implement it all on the clientside, thanks to lunr.js.
I first discovered Lunr.js a few years ago, but I didn’t use it since I decided to go with a server-side option (I needed the dynamic content to be intexed as well). A few weeks ago, however, I’ve decided to go with the client-side approach and I found ElasticLunr.JS which is basically a wrapper over Lunr.js, to make things easier.
Creating the Index, is as easy as (courtesy of ElasticLunr.com):
Searching is as easy as follows:
If you have a Jekyll blog, like this one, you can use Liquid syntax to index all your posts. Here is how I created the Index for this blog.
Now, for the actual Search, I needed a “front-end”, a search widget. Since ElasticLunr.js doesn’t provide such a tool, I wrote my own. Well, actually I didn’t create it from scratch, I’ve refactored the existing Search Widget I had for server-side searching. And, in the process of this refactoring, I’ve learned what “Aging Software” actually means. It’s a simple ReactJS widget, with about 5 components and only a few dependencies: after 3 years of not working on it at all, running
npm install suddenly showed about 400 (!) warnings and erros. I had left the project with a green build badge and when I came back to it, without doing anything, it suddenly exploded.
Why did I dismiss server-side searching? It used to work fine for me, I even wrote my own Github chatbot for indexing and searching Github Pages content. I dismissed it because it became expensive to keep it up (I think I’ve run out of Free Tiers on all Cloud providers) and, besides that, the product didn’t manage to attract users.
To conclude, if you have a similar use-case, I strongly suggest you look into lunr.js and/or elasticlunr.js. Also, you can reuse my Search Widget!