Searching web site content

Every site of more than a single page needs to provide a search capability. Sites with lots of content either need to use a local or third party provided search capability and must be concerned with servicing multiple concurrent users and search index updates as content changes. Small sites can cheat and enable users' devices to provide the content search capability.

For the few small web sites I manage, this one included, I implemented search as a Hugo theme component. This component provides a content search capability based on the Fuse.js JavaScript capability and Hugo’s ability to generate a Custom Output Format JSON rendition of site content. The implementation was inspired by the Github Gist for Fuse.js integration.

Previously I’d used a search capability based on the Lunr full-text search library. For various reasons that ended up being inadequate. So I ended up creating my own search ‘theme’ to make it easy to add / maintain the same basic capability in the web sites I manage. To incorporate that search capability into those web sites I:

1. Add the search theme component as a git submodule

git submodule add https://github.com/JonathanDoughty/hugo-fuse-search.git

2. Copy and adjust the content of exampleSite/content/search.md or exampleSite/content/search/_index.md into each website’s content, adjusting as needed to provide site specific search help.

3. If needed, copy and adjust the content of exampleSite/static/dist/css/site.css into each websites' static/dist/css/site.css or equivalent. This is only needed if a site needs to tweak the look of search item results.

4. Copy and adjust the content of exampleSite/static/dist/js/fuse-options.js into each site’s static/dist/js/ collection. As implemented search uses two sets of content with slightly different fuse parameters: titles and the first 80 characters of text content, followed by 1000 characters of content text, tags, and ‘categories’ at a lower priority. These parameters can be adjusted as needed for each site.

5. Add “search” as one of the themes in config.toml or as a hugo module:

theme = [ "search",  ...]

6. Add “JSON” as one of the outputs formats in config.toml

[outputs]
  home = ["HTML", "JSON"]

7. You may need to make an adjustment to allow the generation of inline HTML:

[markup.goldmark.renderer]
   # render inline HTML, for e.g., search
   unsafe = true

8. Incorporate the search page into each web site. Mine add a main menu selection:

[[menu.Main]]
  identifier = "search"
  url        = "/search/"
  name       = "icon-label-Search"
  post       = '<span class="fas fa-search"></span>'
  weight     = 40

Give it a try

Image credit