Folge 020: Bausteine, FAQ und hautoo forken

Zwischen den Sessions ist hautuu richtig gewachsen: 20 Folgen als Artikel, ein ausgebautes Glossar, eine lange FAQ mit Querverweisen und eine Navigation, die sich anfühlt wie eine kleine Site statt wie ein Ordner voller Dateien. In dieser Folge geht es um Bausteine (wiederverwendbare Inhalte), den Überblick und die Einladung: nutze hautuu als Basis für dein eigenes Projekt, per Fork oder besser oft per Template.

Das Video zu dieser Folge

Du hast noch keinen ZugangsCode? Dann melde dich bei mir!

Du brauchst ein GitHub-Konto. Zwei Einstiege:

• hautoo als Vorlage (Template) (auch privates Repo möglich)
• hautoo forken (Fork bleibt öffentlich)

Bausteine statt zehnmal das gleiche Bild

Die Stack-Grafik kennst du von der Startseite. Die willst du an mehreren Stellen zeigen, ohne in jedem Artikel Überschrift und Bild zu pflegen. Dafür gibt es die Collection Bausteine (blocks): Markdown ohne eigene URL, einmal pflegen, überall gleich.

Stack-Übersicht

Technisch eine Zeile im Body, z. B. {{block id="stack-uebersicht"}}. In Sveltia auf der Startseite im Inhalt über die Toolbar Baustein und den passenden Block wählen (oder unter Collection Bausteine pflegen). Änderst du den Baustein, aktualisieren sich alle Stellen beim nächsten Build. Details: Glossar Baustein, Folge 004.

Weitere Bausteine sind z. B. Kontakt-E-Mail ({{contact-email}}) für Impressum und Datenschutz ohne Klartext im Repo (Folge 019) oder eine Trennlinie für optische Trennung. Bildnachweise zu Seitenhintergründen sammelt die Site automatisch auf dem Impressum (Folge 019).

Seiten feintunen

Bei Seiten kannst du optional Header-Code und Footer-Code setzen: kleine HTML- oder Style-Snippets nur für diese eine Seite, ohne das globale Layout für alle anzufassen. SEO-Felder liegen im CMS weiter unten, damit der Alltags-Content oben bleibt. Titel und Descriptions für alle Seiten kannst du später gezielt mit dem Agenten ausfüllen lassen.

FAQ mit Inhaltsverzeichnis

Die FAQ bündelt viele Fragen in Themengruppen (Überschriften H2). Pro Frage gibt es eine H3-Überschrift. Mit toc.show und toc.levels: [h2] springst du nur zwischen den Gruppen, nicht durch jede einzelne Frage. Das gleiche Muster kennst du von Artikeln mit optionalem Inhaltsverzeichnis (Folge 004).

Glossar-Einträge und Folgen sind von dort verlinkt, damit du nicht alles auswendig lernen musst.

Glossar nachschlagen mit Link-Vorschau (Firefox)

In den Artikeln verlinken wir Glossar-Begriffe, z. B. SSH-Key. Statt jeden Begriff in einem neuen Tab zu öffnen, kannst du in Firefox auf dem Desktop eine Link-Vorschau nutzen: Du bleibst im Artikel und siehst kurz Titel und Beschreibung der Zielseite in einer eigenen Firefox-Karte, nicht als Overlay der Website.

So geht’s laut Mozilla (Stand Firefox 142, Desktop):

• Rechtsklick auf den Link → Eintrag Link-Vorschau (englische Oberfläche: Preview Link).
• Alternativ den Link lange gedrückt halten (Desktop, wie in den Firefox-142-Release-Notes beschrieben).

Die Funktion heißt offiziell „Link Previews“ (Link-Vorschau) und wird schrittweise ausgerollt (z. B. zunächst für einige englische Firefox-Locales und Rechner mit genug freiem RAM). Wenn du den Menüpunkt nicht siehst: Firefox aktualisieren, einmal neu starten und unter Einstellungen → Allgemein → Surfen nach einer Option für Link-Vorschau schauen. In Einzelfällen hilft laut Community-Hinweisen browser.ml.linkPreview.enabled in about:config (nur wenn du weißt, was du tust). Details und Schalter können sich je nach Version ändern, die Mozilla-Hilfe zu Link Previews ist die Referenz.

Lokal (npm run dev, localhost) klappt die Vorschau oft nicht (Firefox meldet dann, dass keine Vorschau möglich ist). Auf der öffentlichen Site mit SEO-Beschreibung im Glossar ist das Nachschlagen angenehmer. Optional können KI-Stichpunkte in der Vorschau angeboten werden; für Glossar reicht meist die normale Vorschau aus Seiten-Metadaten.

Früher gab es die Idee experimentell in Firefox Labs (eigene Tastenkombination beim Überfahren eines Links). Die heutige Variante ist die Link-Vorschau über Kontextmenü bzw. langes Drücken.

Eigenes Projekt: Fork oder Template

Wenn dir Struktur, Bausteine, Menüs, Artikel und Seiten gefallen, musst du nicht bei null anfangen. Klonen holt Dateien nur auf die Platte. Für „eigene Site auf Basis von hautuu“ legst du zuerst ein eigenes Repo unter deinem Account an: per Fork oder per Template.

Template (empfohlen, wenn du privat willst)

GitHub-Vorlage: Du erzeugst ein neues Repo und wählst Sichtbarkeit selbst.

1. Öffne hautoo als Vorlage (Use this template / Diese Vorlage verwenden).
2. Vergib einen Repo-Namen (z. B. meine-webseite). Der Name ist nur der GitHub-Ordner, nicht automatisch deine Domain.
3. Wähle Private oder Public. Private heißt: Quellcode auf GitHub nicht für alle lesbar.
4. Repo klonen, in Cursor öffnen, Inhalte und Design anpassen, Cloudflare Pages auf dein Repo hängen (Folge 011).

Fork

1. Auf der Repo-Seite Fork → Create fork (Fork erstellen). Kurz auch in Folge 002.
2. Fork klonen, in Cursor öffnen, wie oben anpassen und hosten.

Wichtig: Forkst du das öffentliche hautuu-Repo, bleibt dein Fork bei GitHub öffentlich. Du kannst ihn später nicht einfach auf privat stellen. Willst du den Code nicht offen auf GitHub, nimm das Template.

Repo privat oder öffentlich ist nicht die Website

Zwei getrennte Dinge:

Schalter	Bedeutung
Repo Public / Private auf GitHub	Wer den Quellcode und die Markdown-Inhalte auf GitHub lesen darf
Website online (Cloudflare, Domain)	Ob Besucher deine Site im Browser erreichen

Ein privates Repo kann eine öffentliche Website ausliefern. Ein öffentliches Repo heißt nicht zwingend, dass du schon eine fertige Domain freigeschaltet hast. Details: Glossar Repository, Glossar Template.

Hast du ein gutes Feature gebaut, schick einen Pull Request zurück ans Original (vom Fork aus besonders natürlich). Ein „Star“ (Stern auf GitHub) beim Original ist ein kleines Danke, wenn dir das Projekt hilft.

Was du mitnehmen kannst

• Bausteine für wiederkehrende Inhalte (Stack, Kontakt, Trenner).
• Glossar, FAQ und Tags als Lern-Netz; in Firefox Link-Vorschau zum Nachschlagen.
• Template oder Fork als Einstieg in dein eigenes Projekt (Template für privates Repo); Menü und Inhalte nach dem Kopieren: Folge 024. Stack-Idee in Folge 001.
• Bilder für Hintergründe und Assets: Quellen, WebP und Upload (Folge 021).