Pagefind

Pagefind is a Javascript library that allows you to add a search functionality to your static site. I use it to power the search at https://hamatti.org/search.

My search page is simple:

<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/pagefind/pagefind-ui.js"></script>
 
<h1>Search from hamatti.org</h1>
<div id="search"></div>
<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    new PagefindUI({ element: "#search", showSubResults: true, autofocus: true })
  })
</script>

It loads the CSS and Javascript files and initiates the UI through Javascript.

I’ve set this up ages ago so it’s bit out of date compared to the more modern web component based approach they have these days but it works really well still.

To build the index it uses to run the search, I have a build command in my Eleventy project’s package.json:

"build": "npx @11ty/eleventy && pagefind --site _site"

I pass the output folder (_site) to pagefind and that’s all you need.

Once it’s setup, you don’t really ever have to touch it.

If there are pages or components you don’t want to include in the search, you can add a data-pagefind-ignore attribute to those:

<div data-pagefind-ignore>
Content you don't want in search results
</div>

I use this for example to ignore things like my blog pages’ side panels where I have latest and most popular posts.