{
  "id": "add-pagefind-search-to-astro",
  "type": "playbooks",
  "category": "playbooks",
  "locale": "de",
  "url": "/de/playbooks/add-pagefind-search-to-astro",
  "title": "Prompt-to-PR: Pagefind-Suche zu einer Astro-Site hinzufügen",
  "description": "Das vollständige SOP zum Hinzufügen einer statischen, serverlosen Suche zu einer Astro-Site mit Pagefind – vom ersten Prompt bis zur PR-Beschreibung.",
  "tools": [
    "Cursor",
    "Claude Code"
  ],
  "stack": [
    "Astro",
    "TypeScript"
  ],
  "tags": [
    "search",
    "astro",
    "pagefind"
  ],
  "difficulty": "easy",
  "updated": "2026-06-08",
  "markdown": "# Ein vollständiges Playbook: Anforderung, erster Prompt, erwartete Änderungen, Review, Tests, wahrscheinliche Fehler, Fix-Prompt und PR-Beschreibung.\n\n## 1. Anforderung\n\nVolltextsuche zu einer statischen Astro-Site ohne Server und ohne Datenbank hinzufügen.\n\n## 2. Erster Prompt\n\n```txt title=\"First Prompt\"\nAdd Pagefind search to this Astro static site.\n\n- Add `pagefind` as a devDependency.\n- Update the build script to run `astro build && pagefind --site dist`.\n- Create a `/search` page that mounts Pagefind UI from `/pagefind/pagefind-ui.js`.\n- Mark the main article body with `data-pagefind-body` and add\n  `data-pagefind-ignore` to nav/footer.\n- Do not introduce a server adapter; this stays fully static.\n```\n\n## 3. Erwartete Dateiänderungen\n\n```txt\npackage.json                 (build script)\nsrc/pages/search.astro       (new)\nsrc/layouts/BaseLayout.astro (data-pagefind-ignore on chrome)\n```\n\n## 4. Review-Checkliste\n\n- Das Build-Skript führt Pagefind *nach* `astro build` aus.\n- Die Suchseite verhält sich in `astro dev` graziös (Index existiert nur nach dem Build).\n- Nav/Footer werden vom Index ausgeschlossen.\n\n## 5. Testbefehle\n\n```bash\nbun run build\nbun run preview\n# open /search and query a known term\n```\n\n## 6. Häufige Fehler\n\n- Einbinden der Pagefind-Benutzeroberfläche bevor das Skript geladen wird → `PagefindUI is not defined`.\n- Ausführen von Pagefind vor dem Build, sodass es nichts indiziert.\n\n## 7. Fix-Prompt\n\n```txt title=\"Fix Prompt\"\nPagefind indexed an empty site. Ensure the build runs `astro build` first,\nthen `pagefind --site dist`, and that the UI script loads before init.\n```\n\n## 8. PR-Beschreibung\n\n```md title=\"PR description\"\nAdd static full-text search via Pagefind. Indexes `dist` at build time;\nno backend. New `/search` page; nav/footer excluded from the index.\n```"
}