Nach der erfolgreichen Migration zu Hugo fehlen noch diese und jene Bausteinchen auf der Webseite. Heute soll es um die Suche gehen. Hugo bietet dazu mehrere Tools an, Open Source wie auch kommerziell.

Da ich hier alles selbst hoste, habe ich mich für pagefind entschieden. Pagefind erstellt nach dem Generieren der Seiten durch Hugo in einem eigenen Lauf einen Suchindex. Dieser wird im public-Verzeichnis unter searchindex/ abgelegt.

Die Integration in Hugo ist dabei sehr einfach. Zuerst wird eine neue Seite erstellt, welche das für die Suche notwendige Eingabeformular enthält. Ich habe dazu die Seite Search angelegt, in der der Shortcode {{< search >}} eingebettet ist. Der Shortcode ist unter layouts/shortcodes/search.html abgelegt und ethält den HTML-Code aus dem Pagefind-Quickstart. Den Code habe ich bei mir noch um das automatische Setzen des Fokus auf das Eingabefeld ergänzt.

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({ element: "#search", showSubResults: true });
    document.getElementsByClassName("pagefind-ui__search-input")[0].focus();
  });
</script>

Danach baut man einmalig noch den Aufruf der Suchseite in das eigene Thema ein, wie z.B. hier rechts oben im Menü.

Pagefind kann als Python-Modul installiert werden. Da ich hier Debian mit einer durch die Distribution verwalteten Paketauswahl einsetze, erstelle ich zuerst ein virtuelles Environment unter meinem User und installiere dann Pagefind im gerade erzeugten venv.

python3 -m venv ~/venv/pagefind
~/venv/pagefind/bin/python3 -m pip install 'pagefind[extended]'

Danach wird nach dem Lauf von hugo mit der Ausgabe der statischen Webseiten in public/ der Suchindex mit Pagefind erstellt.

cd <Verzeichnis der Webseite>
~/venv/pagefind/bin/python3 -m pagefind --site public

Anschließend kann der Inhalt von public/ auf den Webserver hochgeladen werden. Ich habe diesen Schritt gleich in mein publish-Skript aufgenommen, damit er jedes Mal automatisch ausgeführt wird.

Siehe auch

• Migration zu Hugo