Pagefind does great client-side search

I post more and more content on my website. What was visible at glance then is now more difficult to look for. I wanted to implement search, but it is a static website. It means that everything is built once, and then published somewhere as final, immutable pages. I can’t send a request for search and get results in return.

Or that’s what I thought! Pagefind is a neat javascript library that does two things:

1. It produces an index of the content right after building the static site.
2. It provides 2 web components to insert in my pages: <pagefind-modal> that is the search modal itself, hidden by default, and <pagefind-modal-trigger> that looks like a search field and opens the modal.

The pagefind-modal component looks up the index when the user types a request. The index is a static file, so there is not need for a backend that processes queries. Of course this only works for basic queries, but it’s a great rool already!

Pagefind is also easy to customize via a list of CSS variables. Adding it to this website was very straightforward.