Die neue Website – ein Blick hinter die Kulissen

​Die alte Seite lief jahrelang bei Wix — und war, ehrlich gesagt, nicht mehr zeitgemäß. Sie hat ihren Zweck erfüllt, keine Frage. Aber sie kostete Monat für Monat Geld, sah am Smartphone nie richtig gut aus weil sie nicht responsive war, das Design wirkte angestaubt, die Bilder waren viel zu klein und die Texte teils sperrig.

Dazu kam ein simpler Gedanke: meine Domains liegen ohnehin beim Webhoster all-inkl, und der bisher ungenutzte Webspace dort kann alles was ich brauche. Warum also weiter für einen Wix-Baukasten zahlen? Also habe ich beschlossen, etwas Eigenes zu bauen: eine Seite die schnell ist, modern und lebendig wirkt — ein wenig verspielt ist 😅 (die langsam wandernden Lichtspuren im Hintergrund hast du sicher schon bemerkt 😊), die die Bilder wirklich groß zeigt und auf jedem Gerät gut aussieht, vom 32-Zöller bis zum Smartphone. Und vor allem: eine Seite, die komplett mir gehört und die ich bis ins letzte Detail selbst in der Hand habe.

Was unter der Haube steckt

Ein fertiges System wie WordPress oder Joomla kam für mich bewusst nicht infrage. Diese CMSs sind mächtig, aber auch fragil: viel Angriffsfläche, Plugins, die man braucht, aber nicht unter Kontrolle hat und die irgendwann Sicherheitslücken einschleppen, ständiges Update-Chaos wegen Versions-Abhängigkeiten.

Stattdessen steht hinter der neuen Seite ein schlankes, selbst gebautes Fundament. Design-System, Bild-Aufbereitung und alles Optische entstehen mit Astro, Tailwind CSS und Playwright— modernen Build-Werkzeugen, die nur in der Entwicklungsumgebung laufen, nicht am Server. Ausgeliefert werden die Seiten von schlankem PHP, das die Inhalte aus einfachen Text-Dateien liest — eine klassische Datenbank samt Serverdienst, der ständig laufen und gewartet werden will, gibt es gar nicht. Ein hoch effizienter Cache sorgt dafür, dass jede Seite danach so flott lädt wie pures, statisches HTML — genau das, was Browser am schnellsten anzeigen. Wird eine Seite vom Inhalt her geändert fliegt sie aus dem Cache, beim ersten Aufruf wird sie neu erstellt, wieder gecached und ist bei weiteren Aufrufen wieder schnell.

Pflegen kann ich trotzdem alles bequem über ein eigens entwickeltes PHP-Admin-Panel: Texte, sämtliche Bilder und Galerien samt Bild-Upload und auch die News — letztere in einem WYSIWYG-Web-Editor, in dem ich direkt sehe, wie es live aussehen wird, ohne eine Zeile Code anzufassen. Bequem wie ein Baukasten, schnell wie statisches HTML.

​Sicherheit von Anfang an

Das Thema Sicherheit habe ich von Anfang an mitgedacht, statt am Ende zu flicken. Das Admin-Panel ist nur von ein paar fixen IP-Adressen aus erreichbar — für alle anderen existiert es praktisch gar nicht. Alles, was im Browser landet, wird vorher geparsed und aufbereitet: eingeschmuggelter Code nicht ausgeführt, sondern höchstens als harmloser Text angezeigt wird. CSRF-Token — geheime Einmal-Schlüssel — garantieren, dass Admin-Aktionen wirklich von mir ausgelöst wurden und nicht von einer manipulierten fremden Seite.

Das Kontaktformular wehrt Spam gleich fünffach ab: CSRF-Token samt Session-Pflicht, ein unsichtbares Honeypot-Feld, ein Rate-Limit pro Absender-IP, strenge Validierung mit Schutz vor Header-Injection — und eine Zeitfalle, die Bots daran erkennt, dass sie schneller absenden, als ein Mensch tippen kann. Verschlüsselt über HTTPS läuft ohnehin alles.

Auch eine Suchmaschinen-Optimierung (SEO) ist wurde durchgängig umgesetzt: aussagekräftige Seitentitel und Meta-Angaben, strukturierte Daten, eine Sitemap die Suchmaschinen den Weg durch alle Unterseiten weist, sprechende URLs die auch ein Mensch auf Anhieb lesen kann, und Open-Graph-Tags, damit ein geteilter Link in den sozialen Medien gleich mit ordentlichem Vorschaubild erscheint.

Gebaut mit KI – aber nicht auf Knopfdruck

Entstanden ist das Ganze Stück für Stück direkt in der Entwicklungsumgebung Visual Studio Code, gemeinsam mit Claude Code und Claude-KI-Modellen. Damit das nicht ins Beliebige abdriftet steckt eine Menge Vorarbeit drin: Design, technische Architektur und alle Konventionen habe ich in einem Playbook aus gut einem Dutzend Markdown-Dateien definiert (das sind die "Prompts"), das die KI bei jedem Schritt anweist. Das fühlt sich dann eher wie echte Teamarbeit an als wie ein Knopfdruck. Die Auswahl der Fotos habe ich natürlich nicht einer KI überlassen, das war für mich einer der auswändigsten Tasks.

Die KI hält sich strikt an dieses Playbook, entwickelt und coded Schritt für Schritt, iterativ, macht dabei — wie jeder Mensch der entwickelt — auch mal Fehler, erkennt diese aber selbst, korrigiert sie und testet und korrgiert praktisch ununterbrochen weiter: mit Playwright (einer Browser-Simulation) schaut sie sich das Ergebnis immer wieder in allen Auflösungen an, vom großen Monitor bis zum schmalen Smartphone-Display. Und wenn eine Entscheidung ansteht, fragt sie lieber nach, statt blind draufloszubauen. Je nach Aufgabe kamen verschiedene Modelle zum Zug: meist Opus 4.8 für die kniffligen Sachen, Sonnet 4.6 für die Routine — und wenn es richtig komplex wurde, Fable 5. Teilweise wurden bis zu 3 Sub-Agents gestartet, sozusagen ein KI-Team an Entwicklern. Gesichert und versioniert ist alles über GitHub: damit geht nichts verloren, jeder Stand bleibt nachvollziehbar, spätere Erweiterungen sind leicht umzusetzen.

Was ich dabei gelernt habe

Im Internet wird KI-Entwicklung gern so dargestellt, als müsste man nur „mach mir eine Website" eintippen (einfach gesprochen) — und hinten fällt ein gutes Ergebnis raus. So läuft das aber leider nicht. Wer ein wirklich gutes Ergebnis bekommen will muss selbst einiges an Wissen mitbringen: konkrete Vorstellungen von Design und technischer Architektur, klare Ziele, ein Grundverständnis von HTML, CSS und Scripting. Man muss die oft ziemlich technischen Rückfragen der KI verstehen und beantworten können, mit Visual Studio Code und einem Terminal umgehen können — und eine Aufforderung der KI wie z.B. „installier' bitte Python in der Entwicklungsumgebung" auch tatsächlich umsetzen können.

KI war für mich eine Riesen-Hilfe — ohne sie hätte ich diese Website nicht bauen können, dafür sind meine Programmier-Kenntnisse zu dürftig. Aber ohne fundiertes Wissen und ein durchdachtes Playbook kommt kein zufriedenstellendes Ergebnis zustande. Die KI ist ein extrem starkes Werkzeug — sie ersetzt aber nicht das Wissen darüber, was man eigentlich bauen will. Und wie.

Fragen zur Seite — oder gleich eine Bildidee? Schreib mir.

hier noch Ansichten der Admin Panels: