This project demonstrates how to build and use a Lunr search index for a static website.
- Install Node.js (https://nodejs.org/en/download/).
- Create a working directory, separate from the directory with your HTML files.
- Open a command window or shell prompt in your working directory.
- Install lunr:
npm install lunr
- Install cheerio, an HTML parser:
npm install cheerio
- Copy build_index.js into your working directory.
- If you want to try this on the example site, copy the example_site folder into your working directory.
- Edit build_index.js.
- Change the HTML_FOLDER constant to point to the folder with your website's HTML files. Or leave it as is to see how it works for the example site.
- You can build the search index on the HTML document title, meta description, meta keywords, and body tags. Specify which of these tags to include using the SEARCH_FIELDS constant.
- Save and close build_index.js.
- In the command window or shell prompt, enter:
node build_index.js
To build the index, the script reads HTML tags from each HTML file and initializes a Lunr index based on tag content. While the Lunr index can be serialized as JSON, the script adds a variable declaration (var LUNR_DATA = ...
) so we can easily load it as a script file in our search page.
Lunr search results just provide the identifier of each matching item. To provide title, preview, and hyperlink, the script also includes a dictionary (var PREVIEW_LOOKUP = ...
) mapping each identifier to its title, etc.
To see the search index in action:
- Build a search index named
lunr_index.js
for the example site using the instructions above. - Copy lunr_index.js to the example_site folder.
- Open search.html in your browser and enter a search term like
cat
ormango
.