DEV Community

Alex Spinov
Alex Spinov

Posted on

Pagefind Has a Free Static Site Search — Here's How to Use It

#search #static #webdev #jamstack

Algolia charges $1/1K search requests. Elasticsearch needs a server. Pagefind runs entirely in the browser — add full-text search to any static site with zero hosting cost.

What Is Pagefind?

Pagefind is a fully static search library. It indexes your site at build time and runs searches client-side using a compressed index — no server, no API, no monthly bill.

Quick Start 

npx pagefind --site dist
Enter fullscreen mode Exit fullscreen mode

That's it. Pagefind indexes your built site and generates a search UI.

<!-- Add to any page -->
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
  new PagefindUI({ element: "#search" });
</script>
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. Build your site (Astro, Hugo, Next.js, etc.)
  2. Run Pagefind — indexes HTML output
  3. Compressed index — split into chunks (~100KB base + lazy-loaded fragments)
  4. Client-side search — WebAssembly-powered, instant results

Performance

Site Size Index Size Search Speed
100 pages 20KB <10ms
1,000 pages 80KB <20ms
10,000 pages 200KB <50ms
100,000 pages 500KB <100ms

Customization

Control What Gets Indexed 

<!-- Include specific content -->
<main data-pagefind-body>
  <h1>This gets indexed</h1>
  <p>So does this</p>
</main>

<!-- Exclude content -->
<nav data-pagefind-ignore>This is NOT indexed</nav>

<!-- Custom metadata for filtering -->
<article data-pagefind-meta="category:tutorial, date:2024-01-15">
  <h1 data-pagefind-meta="title">My Tutorial</h1>
</article>
Enter fullscreen mode Exit fullscreen mode

Filtering 

<!-- Tag content for filtering -->
<span data-pagefind-filter="category">JavaScript</span>
Enter fullscreen mode Exit fullscreen mode 
const pagefind = await import('/pagefind/pagefind.js');
const results = await pagefind.search('query', {
  filters: { category: 'JavaScript' },
  sort: { date: 'desc' },
});
Enter fullscreen mode Exit fullscreen mode

Custom UI 

// Use the API directly for custom UI
const pagefind = await import('/pagefind/pagefind.js');
await pagefind.init();

const search = await pagefind.search('typescript');

for (const result of search.results) {
  const data = await result.data();
  console.log(data.url, data.excerpt, data.meta.title);
}
Enter fullscreen mode Exit fullscreen mode

Framework Support

Works with ANY static site generator:

  • Astro, Hugo, Eleventy, Jekyll
  • Next.js (static export), Nuxt (static)
  • VitePress, Docusaurus, Starlight
  • Plain HTML

Why Pagefind

Feature Pagefind Algolia Elasticsearch
Cost Free $$$ Server costs
Setup 1 command Account + API Cluster setup
Hosting None needed Their servers Your servers
Privacy Client-side Third-party Depends
Performance <50ms ~100ms ~50ms
100K pages Works Expensive Works

Get Started

Adding search to your data projects? My Apify scrapers extract searchable content from any website. Custom solutions: spinov001@gmail.com

Top comments (0)