Header-Bild für neue und aktualisierte Webseite

Ich habe meine Webseite auf eine neue technische Basis umgezogen: Von WordPress mit PHP hin zu einer rein statischen Seite mit dem Static Page Generator 11ty. Das Design, die Konzeptionierung sowie den Großteil des Umzugs hat dabei das KI-Tool Claude Code übernommen.

Wie der aufmerksame Besucher meiner Webseite feststellen wird, habe ich diese bereits vor einigen Wochen auf eine ganz neue technische Basis umgezogen, auf Basis der Software 11ty.

11ty ist ein sogenannter Static Site Generator. Das bedeutet, dass ich die Inhalte der Seite in Markdown-Dateien verfasse und 11ty bei dem Deploy der Seite die ganzen HTML-Dateien generiert. Damit lassen sich auch komplexe Webseiten (auch noch viel komplexere Layouts als hier) problemlos umsetzen. 11ty sorgt dann dafür, dass alles an der richtigen Stelle ist. Wenn man das Ganze sauber einmal vorbereitet, ist damit sehr viel möglich. Ein großer Vorteil bei der Nutzung eines Static Site Generators ist natürlich, dass die Gefahren erfolgreicher Angriffe auf die Webseite deutlich reduziert werden, da es keinen dynamischen Code mehr gibt, der bei einem Aufruf ausgeführt werden muss.

Auch die Suche (mit Pagefind) ist komplett clientseitig und zeigt gut auf, was alles heutzutage problemlos auf statischen Webseiten umsetzbar ist.

Ein besonderer Fokus bei meiner Webseite lag, wie auch schon zuvor, auf der Geschwindigkeit. Natürlich ist diese durch die Nutzung rein statischer Inhalte (HTML, CSS und JS) ohnehin schon schnell, aber ich sehe es auch immer ein wenig als Proof of Concept, was alles möglich ist. So werden z.B. Bilder in der Regel entweder als AVIF, WebP oder JPG ausgeliefert und beim Deploy der Seite in einer CI / CD-Pipeline auf meiner eigenen Gitea-Instanz entsprechend komprimiert.

Gitea CI-Pipeline (Screenshot)

Durch Prefetching, Minifying, Lazy Loading, Komprimierung via Brotli und weiteren Techniken wird die Geschwindigkeit zudem noch weiter gesteigert.

Auch habe ich einen großen Fokus auf die Einhaltung gängiger Web-Standards gesetzt: Alle Seiten sind mit OpenGraph-Tags sowie weiteren strukturierten Metadaten versehen.

Des Weiteren habe ich die Gelegenheit zugleich genutzt und meinen Lebenslauf hier veröffentlicht. Außerdem wurden diverse Inhalte auf Englisch übersetzt, um auch ein internationales Publikum anzusprechen, wie es zuvor schon bei einigen meiner Blog-Posts der Fall war.

Erstmalig habe ich damit auch privat ein größeres Projekt mit KI umgesetzt, in diesem Fall mit Claude Code von Anthropic. Für mich hat das beeindruckend gezeigt, wie viel mit den heutigen KI-Modellen im Bereich der Programmierung möglich ist: Fast die gesamte Migration von WordPress zur neuen Seite wurde dabei von Claude übernommen. So kann Claude nicht nur programmieren, sondern auch beraten und Vorschläge machen. Der Vorteil an einer statischen Webseite ist aber natürlich auch, dass Bedenken im Hinblick auf Sicherheit zurückstehen können. Bei dynamischen Inhalten, z.B. mit PHP oder anderen Programmiersprachen wäre ich in dieser Hinsicht bei der umfangreichen Verwendung von KI (Vibe Coding) sicher vorsichtiger. Wenn man aber weiß, worauf man achten muss, kann man auch hier beeindruckende und auch sichere Ergebnisse erzielen.

Für mich wird es nur der Anfang in der umfangreichen Nutzung von KI-Tools auch im Bereich der Programmierung sein: Auch andere Tools wie Codex von OpenAI, den Begründern von ChatGPT, zeigen, wie viel heute damit möglich ist und wie rasant die Entwicklungen in diesem Bereich derzeit sind.