---
title: "💭 Pagefind | Pagefind — Static low-bandwidth search at scale"
description: "!https://pagefind.app/"
date: 2023-09-20
published: true
tags:
  - webdev
  - search
  - wasm
  - thought
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>
```

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>
