SOURCE

Getting Started with Pagefind

Properties1
tagsweb-dev, site-search, pagefind, static-sites, jamstack, wasm
AUTHOR
Pagefind / CloudCannon
ORIGINAL
view original

4 min read

Getting Started with Pagefind

Author: Pagefind / CloudCannon (NEW: pagefind) | Published: unknown (living docs; v1.5.2 at fetch) | Source: article

Summary

Pagefind’s getting-started guide is the missing build-time static index documentation for Site Search. The product runs after the static-site generator and writes a static search bundle into the generated site. You do not hand-build an index; Pagefind generates it from the HTML you already shipped. Because indexing happens post-build, the guide deliberately adds the search UI first so the markup exists in the output that Pagefind will scan.

The default UI is prebuilt web components. You add a stylesheet and module script from /pagefind/ plus <pagefind-modal-trigger> and <pagefind-modal>. Those /pagefind/ assets are created at index time, so a hugo serve-style dev server shows nothing until you index the output directory (the guide assumes Hugo public/; any static HTML tree works).

Runners: npx -y pagefind --site public --serve, a Python wrapper (pagefind[extended]), a downloaded binary, or cargo install pagefind. After indexing, the CLI reports pages, words, filters, index chunks, and time (sample: 2,496 pages, 22,852 words, 27 chunks, 2.357 seconds) and can preview on :1414. Pagefind itself has no server component — search is fully baked into the static site. --serve is only a shortcut to index and then serve the output through any static web server. The required production step is running Pagefind after every site build on the CMS or host, minus --serve, so the bundle deploys with the site.

The architecture this wiki needed: a WASM / static-asset search index, no request-time server, no hosted crawl, chunks downloaded by the browser as needed. Optional next steps are index config, metadata, filters, sorting, weighting, multilingual search (set lang on <html>), and a JS search API. For many sites the getting-started path is enough. This is the official how-to for the build-time pole of Site Search; it does not argue against Algolia — it just documents a post-build index that ships with the static artifact.

Key Claims

  • Post-build indexing. Pagefind runs after the SSG and indexes generated HTML, not source files. (documented)
  • No search server. The integration is a static bundle in the site; --serve is only a preview helper. (documented)
  • Prebuilt UI via /pagefind/pagefind-component-ui.css + .js and <pagefind-modal> / <pagefind-modal-trigger>. (documented)
  • Dev servers that do not write output will not show search until you index the build directory. (documented)
  • Run after every production build (npx/pip/binary/cargo) before deploy. (documented)
  • WASM/static chunks — the browser loads only the pieces it needs; no crawler quota, no webhook sync. (documented)
  • Set lang on <html> for multilingual performance. (documented)

Notable quotes

“Pagefind runs after your static generator, and outputs a static search bundle to your generated site. With Pagefind, you don’t need to build a search index by hand — the index is generated for you from your generated site.”

Why citable: The one-sentence architecture definition that fills the Site Search build-time gap.

“Note that Pagefind itself does not have any server component — the search integration is fully baked into your static site.”

Why citable: Sharp contrast with hosted-crawl SaaS (Site Search 360, Algolia). Use when deciding whether a static site needs a search API.

Connections

Entities mentioned: Pagefind (NEW: pagefind) · CloudCannon (minor), Hugo (minor) Concepts referenced: Site Search, Rendering Strategies (CSR / SSR / SSG / ISR / RSC), Web Architecture & Scalability · Algolia (NEW: algolia)

Contradictions / Tensions

  • Fills the gap Adding Search To Your Site In 15 Minutes left. That article only documented hosted-crawl SaaS (Site Search 360) and noted Pagefind as an undocumentated alternative. This is the official how-to for the build-time pole. Decision rule for when not to use it is in You May Not Need Algolia, not here.
  • No comparison to Algolia/Meilisearch in this page — it is a getting-started doc, not a buyer’s guide. Do not read “no server” as “always sufficient.”
  • Recency: v1.5.2 at fetch (2026-09-04). Re-check CLI flags if the UI package names change (pagefind-component-ui vs older pagefind-ui).

Notes

Primary official source for the static/build-time slot on Site Search. Pair with You May Not Need Algolia for the Pagefind-vs-Algolia decision. Extract filename is pagefind-docs.txt.