## Pagefind: a perfect search for a static website/blog
<!-- published: 2024_08_01 -->

![](pic/pagefind.png)

I fancied a [search](https://developer.run/search) function for this [blog](https://developer.run/), mainly so that you, dear readers, would be able to click on tags like [#DIY](https://developer.run/search?q=%22%23DIY%22) and [#Tip](https://developer.run/search?q=%22%23Tip%22) and see all the posts I have humbly written for you. Bloated blog engines like Hugo or Jekyll achieve this by generating an extra html page for each tag, but this goes strictly against my understanding of minimalism. By the way, minimalism is the reason why this blog uses no engine at all and is generated by a [bunch of regexes](https://developer.run/46).

To my shame, previosly, I used Google for tag functionality, clicking on tag lead to a Google search like `www.google.com/search?q=site:developer.run+%22%23DIY%22`. And I was looking for a better search solution just for my blog.

<!--more -->

I found [Pagefind](https://pagefind.app) (pun intended) and was impressed with how easy and fast it was to integrate it into my completely custom scripts. The idea is that after generating your static website html, you feed the output to Pagefind so it indexes all the content (like the big search engines do). The generated index files are served along with the static content, and partially downloaded via JavaScript when the visitor uses the search function. Because of this ingenious approach - no Node.js or PHP on backend is needed, and your own independent search will work on static hostings like Cloudflare pages, Github pages, Netlify etc.

1. I've added a [search page](https://developer.run/search) with [8 lines](https://pagefind.app/docs/) of JavaScript and [some css](https://pagefind.app/docs/ui-usage/#customising-the-styles), and run `npx -y pagefind --site public --serve` (where `public` is the output directory). Setup took a minute, indexing itself took less then a second, and I've already had a decent search!
2. Then I added [data-pagefind-body](https://pagefind.app/docs/indexing/) to the `div` surrounding the post content, and the search functionality became perfect as it excluded index pages and auxiliary text like header and footer.
3. Finally, I've made a tiny change so that the query parameter of the search page is parsed, so that urls like [/search?q=test](https://developer.run/search?q=test) work:

```js
new PagefindUI({ element: "#search", autofocus: true, pageSize: 20 })
            .triggerSearch(new URL(window.location.href).searchParams.get('q'));
```

That was it, the whole process took ~10 minutes and my blog had its very own search.

I wish more people knew about Pagefind. So if you run a blog, please consider it.

🏷️Minimalism 🏷️Webmaster