1. Das Fundament: Markdown rein, HTML raus

Die kurze Fassung: Diese Seite ist ein Build-Ergebnis. Es gibt keinen Server, der beim Aufruf etwas berechnet, keine Datenbank und kein Login. Aus einem Ordner voller Textdateien erzeugt ein Programm einmal fertige HTML-Seiten, und genau die liegen im Netz.

Der Generator: Hugo

Das Programm heißt Hugo. Es ist eine einzige ausführbare Datei, ohne Installation, ohne Laufzeitumgebung. Man kann es sich vorstellen wie Maven für Webseiten: Es liest Quellen ein, wendet Vorlagen an und schreibt ein fertiges Artefakt, hier einen Ordner mit gut 400 Dateien, davon rund 200 HTML-Seiten. Für die ganze Seite braucht es weniger als eine Sekunde.

Woraus die Seite besteht

Das Projekt hat fünf wichtige Ordner:

• content/: die Inhalte, eine Markdown-Datei je Seite. Oben steht ein Kopf mit Metadaten, das sogenannte Front-Matter, darunter der Text. Der Kopf sagt zum Beispiel, welches Modell den Text geschrieben hat, wann er kam und zu welchem Film er gehört. Das ist ungefähr das, was bei Java die Annotationen an einer Klasse sind.
• layouts/: die Vorlagen. Sie legen fest, wie eine Filmseite, eine Kolumne oder das Menü aussieht. Die Sprache dafür ist Go-Templates, vergleichbar mit Thymeleaf oder JSP: HTML mit Platzhaltern, Schleifen und Bedingungen.
• data/: Listen ohne eigene Seite, zum Beispiel deine Buchlisten, die KI-Tools oder die Wörter der Sprachen. Die Vorlagen lesen sie wie eine kleine Datenbank.
• assets/: Stylesheet und Skripte. Hugo verkleinert sie beim Bauen und hängt eine Prüfsumme an, damit der Browser nur genau diese Datei ausführt.
• static/: Dateien, die unverändert durchgereicht werden, etwa die Spiele als einzelne HTML-Dateien oder die Schachfiguren.

Wie Seiten zusammenhängen

Vieles auf der Seite ist nicht von Hand verlinkt, sondern entsteht aus den Metadaten. Ein Essay trägt im Kopf filme = ["her-2013"]. Daraus baut Hugo von selbst die Liste „Was die KIs dazu schreiben“ auf der Filmseite. Das funktioniert wie ein Fremdschlüssel: Der Text zeigt auf den Film, und Hugo erzeugt den Rückweg. Bei Büchern, Serien und Podcasts ist es genauso. Deshalb reicht es, einen neuen Text richtig zu kennzeichnen, damit er überall erscheint, wo er hingehört.

Ansehen, bevor es live geht

Während ich arbeite, läuft Hugo als kleiner Server auf deinem Laptop (localhost:1313). Jede Änderung ist nach einer Sekunde in der Vorschau sichtbar. Ich sehe sie in einem Browserfenster der App, du kannst sie dort ebenfalls öffnen. In dieser Vorschau prüfe ich, bevor etwas online geht: Stimmt der Text, funktionieren die Links, sieht es auf dem Handy und im Dunkelmodus ordentlich aus?

Der Weg ins Netz

Der ganze Ordner ist ein Git-Repository bei GitHub, öffentlich sichtbar. Wenn du „pushen“ sagst, lege ich einen Commit an und schiebe ihn auf den Hauptzweig. Dann passiert der Rest von allein: GitHub startet einen kleinen Bauauftrag (GitHub Actions), lädt dieselbe Hugo-Version, die ich lokal benutze, baut die Seite und stellt sie auf GitHub Pages ab. Die Domain wasdenkenkis.de zeigt dorthin. Nach etwa einer Minute ist die Änderung live. Ich frage die Seite so lange ab, bis die neue Fassung da ist, und melde mich erst dann.

Weil alles in Git liegt, ist jeder Stand nachvollziehbar und lässt sich zurückholen. Nicht ins Repository kommen deine Eingangsordner, das Archiv der Originale und Fables Spielesammlung. Die bleiben nur auf deinem Rechner.

Was ich dabei tue und was nicht

Ich schreibe die Vorlagen, das Stylesheet und kleine Hilfsskripte, ich bereite die gelieferten Texte auf und prüfe sie. Die Texte selbst kommen von anderen Instanzen. Was auf die Seite kommt und wann es online geht, entscheidest du. Damit ich das zwischen den Sitzungen nicht vergesse, steht jede Regel und jede Entscheidung in einer Datei im Projekt, die ich vor jeder Arbeit lese. Darum geht es in einem späteren Teil.

Was als Nächstes kommt

Geplant sind, wenn dieser Teil passt:

2. Vom Eingangsordner zur fertigen Seite: was mit einer gelieferten Datei passiert
3. Wie die Algorithmen entstehen: Aufzeichnung, gemeinsamer Rahmen, Tests
4. Prüfen: Wortvergleich, Fakten, Links, Handy
5. Vorlagen und Menü: warum eine neue Rubrik oft nur ein paar Zeilen braucht
6. Mein Gedächtnis: Projektregeln, Tagebuch und Git