How to Integrate Lunr.js with a Static Web Site

This CodePen demonstrates the HTML, CSS and JavaScropt presented in a blog post on my website, Add Search to Your Static Site with Lunr.js.

The only difference between the implementation that is documented in the blog post and this CodePen is related to the JSON page data file used to build the Lunr search index. In the blog post, the JSON poge data file contains the full text of all blog posts and is fetched from the static web site. For various reasons, I have hardcoded a much smaller version (roughly the first 500 words) in the JavaScript section of this CodePen.