---
title: "Pagefind | Pagefind — Static low-bandwidth search at scale"
description: "!https://pagefind.app/"
date: 2023-09-20
published: true
tags:
  - dev
  - search
  - thought
  - wasm
  - webdev
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://pagefind.app/" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-content">
      <div class="embed-card-title">Pagefind</div>
      <div class="embed-card-description">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.</div>
      <div class="embed-card-meta">Pagefind &middot; pagefind.app</div>
    </div>
  </a>
</div>


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

``` bash
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.

``` html
<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>
```
