Story’s JavaScript Search

This article documents Story’s built-in search features, which don’t rely on external search engines. Story uses the LunrJS library to provide fast browser-based search. This page first explains how search setup works, and then provides copy-paste ready code samples for you to use.

To get Story’s search to work, you need to take a couple of steps:

Create a piece of content with the URL you want. Story assumes you want /search/ and adds an icon for that in the top menu automatically. So you can simply create content/search/_index.md and that should work.
Give this content the search layout, and a title.

There doesn’t need to be any Markdown content; the search layout ignores it.

This will create the search page, but you also need to tell Hugo that it should build the JSON index of the content in the site, which LunrJS uses. To do this, configure the home output type to include JSON, which isn’t included by default. This will override the default output settings, so you’ll need to explicitly specify the defaults in addition. Here’s a YAML config file section for your config.yaml file to enable this:

outputs:
   home:
      - HTML
      - JSON
      - RSS
   page:
      - HTML
   section:
      - HTML
      - RSS
   taxonomy:
      - HTML
      - RSS
   taxonomyTerm:
      - HTML
      - RSS

If you use TOML, use this:

[outputs]
  home = ["HTML", "JSON", "RSS"]
  page = ["HTML"]
  section = ["HTML", "RSS"]
  taxonomy = ["HTML", "RSS"]
  taxonomyTerm = ["HTML", "RSS"]

There’s more you can do. If you want to create a full-featured search page easily, just paste the following code into content/search/_index.md

---
layout: search
url: /search/
title: Search
classes:
- feature-nosubtitle
- feature-nohdr
---

This illustrates an additional layout feature in Story: displaying it without a header image.