P PasteCode
Playbook

Prompt-to-PR: Add Pagefind Search to an Astro Site

The full SOP for adding static, zero-backend search to an Astro site with Pagefind — from first prompt to PR description.

CursorClaude Code AstroTypeScript
.md .json Difficulty: Easy Updated Jun 8, 2026

A complete playbook: requirement, first prompt, expected changes, review, tests, likely failures, fix prompt, and the PR description.

1. Requirement

Add full-text search to a static Astro site with no server and no database.

2. First Prompt

First Prompt
Add Pagefind search to this Astro static site.
- Add `pagefind` as a devDependency.
- Update the build script to run `astro build && pagefind --site dist`.
- Create a `/search` page that mounts Pagefind UI from `/pagefind/pagefind-ui.js`.
- Mark the main article body with `data-pagefind-body` and add
`data-pagefind-ignore` to nav/footer.
- Do not introduce a server adapter; this stays fully static.

3. Expected File Changes

package.json (build script)
src/pages/search.astro (new)
src/layouts/BaseLayout.astro (data-pagefind-ignore on chrome)

4. Review Checklist

  • Build script runs Pagefind after astro build.
  • Search page degrades gracefully in astro dev (index only exists post-build).
  • Nav/footer are excluded from the index.

5. Test Commands

Terminal window
bun run build
bun run preview
# open /search and query a known term

6. Common Failures

  • Mounting Pagefind UI before the script loads → PagefindUI is not defined.
  • Running Pagefind before the build, so it indexes nothing.

7. Fix Prompt

Fix Prompt
Pagefind indexed an empty site. Ensure the build runs `astro build` first,
then `pagefind --site dist`, and that the UI script loads before init.

8. PR Description

PR description
Add static full-text search via Pagefind. Indexes `dist` at build time;
no backend. New `/search` page; nav/footer excluded from the index.