Pagefind — Static Low-Bandwidth Search for Any Website

Introduction

Pagefind is a fully static search library written in Rust that indexes your built website and generates a compact search index. Users search entirely in the browser with no server required, making it ideal for documentation sites, blogs, and static site generators.

What Pagefind Does

• Indexes static HTML files after your site build completes
• Generates a compressed search index that loads incrementally as users type
• Provides a default search UI component or a JavaScript API for custom interfaces
• Supports filtering, sorting, and metadata extraction from HTML data attributes
• Works with any static site generator (Hugo, Astro, Eleventy, Jekyll, etc.)

Architecture Overview

Pagefind runs as a post-build step, parsing your HTML output directory and extracting text content. It builds an inverted index that is split into small chunks, so the browser only downloads the fragments relevant to the current query. The index uses a custom binary format optimized for size. On the client side, a small JavaScript runtime (~6KB gzipped) loads index chunks on demand via fetch and ranks results using BM25.

Self-Hosting & Configuration

• Run after your static site build: npx pagefind --site ./public
• Configure via pagefind.yml or CLI flags for source directory, output path, and language
• Use data-pagefind-body attributes to control which content gets indexed
• Exclude elements with data-pagefind-ignore to skip navigation, footers, or boilerplate
• Add data-pagefind-filter and data-pagefind-meta attributes for faceted search

Key Features

• Tiny client runtime (~6KB gzipped) with incremental index loading
• A 10,000-page site produces an index that transfers under 300KB total
• Multilingual support with language-specific stemming and segmentation
• Built-in search UI or headless JavaScript API for custom interfaces
• Supports indexing across multiple sites into a single merged index

Comparison with Similar Tools

• Algolia — hosted search-as-a-service; Pagefind is fully static with zero ongoing cost
• Lunr.js — client-side search that loads the entire index upfront; Pagefind loads chunks on demand
• MiniSearch — in-memory JS search library; Pagefind pre-builds the index at compile time for lower runtime cost
• Orama — full-text search engine in JS; Pagefind is optimized specifically for static sites with minimal bandwidth

FAQ

Q: Does Pagefind work with Next.js or Nuxt? A: Yes, as long as you generate static HTML output. Run Pagefind against the exported directory.

Q: How does it handle large sites? A: The chunked index architecture scales well. Sites with tens of thousands of pages remain fast because only relevant chunks are downloaded.

Q: Can I customize the search UI? A: Yes. Use the built-in PagefindUI component with CSS overrides, or use the JavaScript API to build a fully custom interface.

Q: Does it support CJK languages? A: Yes. Pagefind uses language-aware segmentation for Chinese, Japanese, and Korean text.

Sources

• https://github.com/Pagefind/pagefind
• https://pagefind.app