Add Full-Text Search to Any Static Site with Pagefind

Search used to mean running a server or paying for a hosted API. Pagefind changes that: it indexes your already-built HTML and ships a tiny search bundle that runs entirely in the browser.

Why Pagefind

• Zero backend. The index is static files served from your CDN.
• Tiny payloads. It loads only the fragments of the index it needs per query.
• Scales well. Comfortable into the thousands of pages.

Step 1: Run Pagefind after your build

Pagefind reads the HTML in your output directory, so it runs after your site generator:

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}

This writes a /pagefind/ folder into your output with the index and UI assets.

Step 2: Tell Pagefind what to index

By default Pagefind indexes the whole page. Scope it to your real content so navigation and footers don’t pollute results:

<article data-pagefind-body>
  <!-- your post content -->
</article>

Add data-pagefind-ignore to anything you want excluded, like a table of contents or related-posts widget.

Step 3: Drop in the search UI

On your search page, load the prebuilt UI and initialize it:

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

Testing locally

The /pagefind/ assets only exist after a build, so search won’t work in the dev server. Run your production build and preview it:

npm run build && npm run preview

Step 4: Add filters (optional)

Tag elements with data-pagefind-filter to let users narrow results — for example by category:

<span data-pagefind-filter="category">Tutorial</span>

That’s a complete, server-free search experience that costs nothing to host and stays fast no matter where your readers are.