Pagefind.

Pagefind ist eine quelloffene Bibliothek für Volltextsuche auf statisch ausgelieferten Websites. Sie besteht aus einem Kommandozeilen-Werkzeug, das nach dem Build das fertig gerenderte HTML indexiert, und einer Suchlaufzeit in WebAssembly, die im Browser läuft. Zwischen Tastendruck und Ergebnis liegt damit kein Netzweg zu einem Dienst.

Der Kern ist in Rust geschrieben und zu WebAssembly kompiliert. Liam Bigelow hat Pagefind im Juli 2022 bei CloudCannon veröffentlicht — als Antwort auf das Problem, dass ältere clientseitige Suchen den kompletten Index als eine Datei laden mussten und bei großen Websites in den Megabyte-Bereich kippten. Heute wird Pagefind als eigenständiges Projekt unter der MIT-Lizenz entwickelt: frei verwendbar, auch kommerziell, ohne Abo und ohne Anfragekontingent.

Wir hängen Pagefind als festen Schritt in die Build-Kette, nicht als nachträgliches Skript. Auf dieser Website ist es Schritt drei von sechs: erst wird das CSS kompiliert, dann bekommt jede h2 und h3 eine stabile ID, und erst danach läuft pagefind --site dist über die fertigen Seiten. Die Reihenfolge ist kein Detail: Ohne die Anker vorher kennt der Index keine Sprungziele, und die Suche könnte nur auf ganze Seiten verlinken.

Indexiert wird nur, was zählt. Der durchsuchbare Bereich ist mit data-pagefind-body am Hauptinhalt ausgezeichnet — Topbar, Footer und die Palette selbst bleiben draußen, sonst meldet jede Seite denselben Rahmen als Treffer. Die Runtime liegt auf demselben Host wie die Website. Das ist der Grund, warum unsere Content-Security-Policy ohne Ausnahme für einen Fremdhost auskommt und die Suche keine Einwilligung braucht.

Die Oberfläche bauen wir selbst. Pagefind bringt fertige UI-Komponenten mit; wir nutzen stattdessen die JavaScript-API und rendern die Treffer in unsere Command-Palette. Sie mischt Navigationsziele und Volltexttreffer in einer Liste, zeigt den Textausschnitt mit hervorgehobenem Suchbegriff und springt beim Auswählen direkt in den passenden Abschnitt. Getippt wird mit 120 Millisekunden Verzögerung gesucht, angezeigt werden die sechs besten Treffer, und veraltete Antworten werden verworfen, wenn die nächste Eingabe schneller war.

Geladen wird die Bibliothek erst, wenn jemand die Palette öffnet — beim normalen Seitenaufruf kostet die Suche null Byte. Das ist Absicht: Die Startseite steht bei PageSpeed Insights mobil auf 100/100/100/100, und eine Suche, die immer mitlädt, würde genau daran knabbern. Fällt der Import aus, läuft die Palette ohne Volltext weiter — die Navigation bleibt bedienbar.

Die ehrlichste Referenz ist die Seite, auf der du gerade bist. Der deutsche Index umfasst rund 100 Seiten — Leistungen, Stack, Cases, Artikel, Tools. Die Runtime, also das WebAssembly-Modul plus das ladende Skript, liegt bei etwa 115 kB unkomprimiert. Dazu kommt pro Anfrage ein Index-Chunk in der Größenordnung von 40 kB und je Treffer ein Fragment von etwa 5 kB. Beides erst dann, wenn jemand tatsächlich sucht.

Probe aufs Exempel: ⌘K drücken und „Migrations" tippen. Der Treffer führt nicht auf die Startseite von PHP & Laravel, sondern direkt auf den Abschnitt, in dem das Wort steht. Genau dafür laufen die Überschriften-Anker vor dem Index.

Dass wir Pagefind nicht überall einsetzen, gehört zur selben Ehrlichkeit: Beim Konzern-Auftritt von Spelsberg — TYPO3, 13 Sprachen, angebundenes PIM — läuft die Produktsuche über Algolia, weil dort ein Katalog mit Facetten durchsucht wird und nicht ein Textbestand. Beide Wege liegen im Werkzeugkasten; die Auswahl steht im Hub Suche, die Projekte unter Cases.