Static Site Generators in Production

Pagefind

Pagefind indexes the built HTML of a static site and serves search from static files, split into small fragments so readers download only what their query needs. For most documentation and content sites it is the right default, and the guides below cover setting it up with Astro and Hugo, indexing several languages, fitting its UI to a design system, and keeping the index small as a site grows.

When search goes wrong, it usually goes wrong quietly: a layout without the body marker drops whole sections from the index, and readers simply find nothing. One guide works back from missing results to those causes. Two comparisons cover where Pagefind sits among the alternatives: Lunr for very small sites, where a single index is marginally faster, and Algolia DocSearch or a self-hosted Typesense server for very large ones.

Pagefind indexing and query flow Four stages. The site builds to HTML. Pagefind indexes the built pages into fragment files. The browser loads a small entry file when search opens. Each query fetches only the fragments that match. How Pagefind serves search without a server Build HTML any generator Index fragments per word range Open search small entry file Query fetch matching fragments
Index size and fragment count are what change as a site grows, which is what the budget guide measures.

Choosing the Right Static Site Generator for Production

  • Pagefind vs Algolia DocSearchComparisonBuild-time Pagefind against hosted Algolia DocSearch on one 2,000-page docs site: relevance, latency, freshness, analytics, privacy and total cost.
  • Pagefind vs Lunr for Small Documentation SitesComparisonPagefind and Lunr compared on a 150-page docs site: index size, first-query time, relevance, setup effort and maintenance, with the crossover point measured.
  • Adding Pagefind to an Astro SiteHow-toAdd Pagefind search to a plain Astro site: post-build indexing, content boundaries, heading weights, a lazy-loaded UI and a CI relevance check.
  • Customizing the Pagefind UIHow-toMake Pagefind's search UI match your design system: theme variables, filters, result metadata, a modal trigger, or a custom UI on the JavaScript API.
  • Indexing Hugo Sites with PagefindHow-toAdd fast, serverless search to a Hugo site with Pagefind: template attributes, taxonomy filters, multilingual output, CI integration and measured build cost.
  • Multilingual Search on Static SitesHow-toBuild per-language search for a static site: language detection, stemming, compound words, CJK segmentation and keeping each locale's index small.
  • Search Index Size Budgets for Large DocsHow-toSet a byte budget for static search on large documentation sites, measure first-query cost on real phones, and trim indexes that have quietly grown too big.
  • Self-Hosting Typesense for a Static SiteHow-toRun Typesense as search for a large static site: index from the build, scoped search keys, typo tolerance, facets, cost and when Pagefind is enough.
  • Tracking Zero-Result SearchesHow-toLog searches that return nothing on a static site with Pagefind or a search server, respect privacy, and turn the weekly report into synonyms and new content.
  • Fixing Missing Results in Pagefind IndexesFixFind why pages or sections are missing from Pagefind search results, from data-pagefind-body scoping to build order and language, and verify the index in CI.
Number of Pagefind guides of each kind Vertical bars: How-tos 7, Fixes 1, Comparisons 2 and Concepts 0. Pagefind guides by kind 7 How-tos 1 Fixes 2 Comparisons 0 Concepts
10 guides use Pagefind in depth; each is listed below under the section it belongs to.
Topics with the most Pagefind guides Horizontal bars, largest first: Search for Static Sites 10. Where Pagefind comes up Search 10
Topic pages give the wider context for each group; the numbers count only guides that use this tool in depth.

Often used with Pagefind

  • Astro1 shared guidesIslands, content collections, astro:assets and deployment.
  • Hugo1 shared guidesBuild time at scale, image caches, modules and multilingual sites.