💭 Pagefind | Pagefind — Static low-bandwidth search at scale

Pagefind | Pagefind — Static low-bandwidth search at scale

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.

Pagefind — Static low-bandwidth search at scale · pagefind.app

Pagefind is absolutely insane. I’ve tried a number of static site searches, and found them all hard to get get going, clunky and not the best experience as a user or developer.

I setup pagefind in about 2 minutes on my site where it found and indexed 833 pages in 2 minutes.

The only downside I see so far is that it is a lot of bandwidth to the user. On simulated slow 3G you can definitly feel it, but not terrible. Anything slower and its going to start feeling frustrating.

edit: I have actually fully deployed it on waylonwalker.com, and its fast!

create the index

npx -y pagefind --site public --serve

Then I put this on a page, it looks really nice on a white background, but would need some work to drop into a dark theme.

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