I use Hugo on a static website that has few updates but still needs a bit of maintenance. With a few thousand pages, it also needs a search. For a long time, I was using a Google Custom Search, but I’m not the biggest Google fan and they insert ads now, so I needed a new solution.
Search is the Worst Part
Search is the worst thing about static sites. Scratch that. Search is the worst part about any site. We all bag on WordPress’ search being terrible, but anyone who’s attempted to install and manage anything like ElasticSearch knows that WordPress’ search is actually pretty good. It’s just limited. And by contrast, the complicated world of search is, well, complicated.
That’s the beauty of many CMS tools like WordPress and Drupal and MediaWiki is that they have a rudimentary and perfectly acceptable search built in. And it’s the headache of static tools like Jekyll and Hugo. They simply don’t have it.
This is, by the way, the entire reason I made that massive JSON file the other day.
To include Lunrjs in your site, download the file and put it in your
/static/ folder however you want. I have it at
/static/js/lunr.js next to my
jquery.min.js file. Now when you build your site, the JS file will be copied into place.
Since this is for Hugo, it has two steps. The first is the markdown code to make the post and the second is the template code to do the work.
The post is called
search.md and this is the entirety of it:
--- layout: search title: Search Results permalink: /search/ categories: ["Search"] tags: ["Index"] noToc: true ---
Yep. That’s it.
I have a template file in
search.html and that has all the JS code as well as everything else. This is shamelessly forked from Seb’s example code.
It’s important to note you will also need to call jQuery but I do that in my
header.html file since I have a bit of jQuery I use on every page. If you don’t, then remember to include it up by
If you have a large search file, this will make your search page slow to load.