You need to generate the search index with Lunr, so I don’t see how you can avoid the JS coding bit.
@kaushalmodi, this is very similar to the solution I use – however make sure the index is generated on the fly.
I don’t remember where I found the JS that halfelf used, but I didn’t write it myself (although I wish I had time to).
Building a search index is a fairly slow process, so I would guess that it would be faster to:
- Serve a pre-built index
- Add Gzip and some sensible cache headers to that index
1 Like
Kinda new here and I know this discussion is a few months old, but thought I’d mention I recently went through setting this up on my site. I wrote up walk-through here: https://www.mattwalters.net/posts/hugo-and-lunr/ (I have very little on my site but you’ll get search results if you search for things like “hugo” or “spacex”)
After reading over this discussion I might should make a few changes to my setup (particularly the parts talking about using alternate output formats)
My implementation is still evolving and has progressed some from that walk-through. For instance, I pre-build the actual Lunr index (not just the JSON of content) during the build process instead of having Lunr build it on the page load. This means I don’t have to call lunr.add() on the individual documents that are in the JSON, that step is done as part of the build process rather than in the browser which speeds getting the search results page ready to show results.
@Rick if you look at the search.js that actually running on my site (instead of the one in the walk-through) you can see my solution for letting the user enter a search phrase on one page but perform the search on another page. Essentially the search form uses the GET method to submit to the search results page and when the search results page loads, it checks to see if the query parameter for their search phrase is populated. If it is, then it performs a search using that phrase.
I’m hoping to put up a new post when my efforts settle some more to show how I pre-build the index, etc. But if someone is really interested and wants to look at the raw code without much explanation, then let me know and I can throw up a gist or something for the relevant parts. It does require a slightly more complex build process because you have to use node to execute some custom JS that does the index building but I was able to get it working with netlify’s CI/CD pretty easily.
Interesting, out traveling but will have a look as soon as possible!
Looks good mate! What search parameters are you using, e.g. just title or entire content of a result?
@Rick In my write-up, I’m putting title, summary, and content into a JSON file and then pulling that from the server and building the index in the browser. When a search happens, I get back the ref from Lunr and look up the Title and Summary from the same file to display to the user. I’ve change the approach over the past couple of nights though.
In my current set up, I write out 2 files at build time:
File 1: Contains Title and Content
File 2: Contains Title and Summary
I have a little JavaScript file that gets run by node during build, and it pre-builds the index needed by Lunr by using File 1, this creates a File 3 (fully built index).
When the user loads the search / search-results page, I load File 3 and File 2 from the server via Ajax. File 3 is what Lunr executes the search against (so it is searching Title and full Content), getting a ranked listing of ref fields. I then use File 2 to display the Title and Summary for those posts / pages.
Ideally, I could include the Title and Summary inside the pre-built index (File 3), but Lunr doesn’t seem to support this, and based on an Issue / ticket I found on Github it doesn’t look like adding this kind of support is anywhere on the horizon.
Really, the “win” to my current process is that the building of the index in the browser can, apparently, take a good bit of time depending on amount of content which is obviously bad for visitors. Not really an issue on my site right now, but might be if I ever import my old content.
1 Like
I have a little JavaScript file that gets run by node during build, and it pre-builds the index needed by Lunr
This is the bit I’m interested in. How does one get node to execute during (at the end of) the build?