So setzt man sein Content-Management-System vor die Tür

Die Idee für dieses Projekt trage ich schon länger mit mir herum. Es geht um meine Website matthiasschuessler.ch. Dort findet sich ein sogenannter Onepager zu meiner Person: ein paar biografische Angaben, ein bisschen Wichtigtuerei.

Die Website stammt aus einer Zeit, als sich die Menschheit noch nicht den grossen Plattformen zugewandt hatte und sich kaum jemand mit einem Linkedin-Profil oder einer Linktree-Page zufrieden gegeben hätte. Heute mag das absonderlich scheinen, aber damals wollte man seinem Ego eine massgeschneiderte Landingpage ausrollen.

Das Projekt besteht in einer radikalen Vereinfachung. Als ich 2018 daran ging, diese Website aufzusetzen, hatte ich diverse Content-Management-Systeme ausprobiert. Um dieses Blog hier zukunftstauglich zu machen, hatte ich mich für WordPress entschieden. Das war eine richtige, aber keine originelle Entscheidung gewesen. Darum wollte ich mit meiner Visitenkarten-Website etwas wagen und installierte Grav: ein Open-Source-CMS, das keine Datenbank braucht und ein vielseitiges Backend hat.

Braucht es das überhaupt?

Glücklich wurde ich mit Grav nicht. Die Bedienung ist mir zu umständlich. Jede kleine Textkorrektur erfordert eine Bearbeitung der Textdateien, aus denen mein Onepager aufgebaut war. Das Bloggen wäre mit Grav mutmasslich einfacher, und mit mehr Routine würde es obendrein Spass machen. Doch weil eine solche persönliche Website nur alle Jubeljahre ein Update erfährt, suchte ich das Backend bloss auf, um ein aktuelles Backup zu ziehen.

Damit sind wir beim springenden Punkt. Ein CMS ist sinnvoll, wenn Inhalte ständig ändern oder neu dazukommen. Für den vorliegenden Zweck würde eine statische Seite ausreichen. Das wäre sicherer und komfortabler, weil ein CMS ein zusätzlicher Angriffspunkt darstellt, gewartet werden will und Platz und Ressourcen auf dem Webserver in Anspruch nimmt.

Die Idee bestand darin, die Website zu behalten, aber das CMS über Bord zu werfen. Aber geht das überhaupt? Und wenn ja, wie?

a) Die ganz einfache Methode

Die einfachste Methode dafür wäre, im Browser Ctrl s zu drücken und die resultierende Datei mit dazugehörendem Daten-Ordner auf den Webserver zu verfrachten.

So schnell das erledigt wäre, so schmerzhaft wären die Einbussen. Bei dieser Methode bleiben Dinge wie das grosse Hintergrundbild auf der Strecke. Dieser Verlust lässt sich mit diesem Trick hier mildern, aber das noch grössere Problem bliebe bestehen: die interaktiven Funktionen, die eine aktive Beteiligung des Servers erfordern, stünden nicht mehr zur Verfügung. Dazu zählen die Statistik, doch vor allem das Kontaktformular, über das Anfragen an mich abgeschickt werden.

b) Der weniger einfache, aber mutmasslich nachhaltigere Weg

Die Alternative besteht (natürlich) darin, den ganzen Kladderadatsch einer KI vorzusetzen und sie zu bitten, die Website möglichst originalgetreu nachzubauen.

Und neulich hatte ich das Vergnügen, diesen zweiten Weg zu beschreiten. Unfreiwillig. Ich hatte durch eine Filezilla-Fehlmanpulation Grav nachhaltig beschädigt. Wie sich zeigte, war mein Backup nicht funktionsfähig. Ob das an mir oder an Grav lag? Die Welt und ich werden es nie erfahren.

Die Erkenntnisse zur Verstatisierung lassen sich wie folgt zusammenfassen:

• Grundsätzlich: Es funktioniert. Meine Website war nach kurzer Abwesenheit schon wieder online.
• Die neue statische Version entspricht nicht pixelgenau dem Original, aber sie kommt ihm ausreichend nahe.
• Die Platzersparnis ist frappant. Mit CMS umfasst die Website fast 8000 Dateien und ist 60 MB gross. Die neue statische Variante: 30 Dateien und 1,83 MB.
• Es sind alle für mich wichtigen Funktionen vorhanden, jedoch teilweise in rudimentärer Form.

Der letzte Aspekt betrifft die Statistik. Die erschien vorher als hübsche Grafik im Backend. Jetzt speichert mir die KI eine Json-Datei auf dem Server, die ich selbst auswerten muss.

Einsichten zum Vibe-Coding

Ich darf abschliessend Einsichten zur künstlichen Intelligenz und zu dieser Form des Webdesign‑Vibe-Codings darbieten:

• Erste Erfolge sind schnell erzielt. Aber die Detailverbesserungen ziehen sich hin: «Bitte ändere dies!» «Jetzt ist das wieder kaputtgegangen.» Und so weiter.
• Als völliges Greenhorn kommt man nicht zum Ziel. Es ist wichtig, die notwendigen Informationen bereithalten zu können, seien das CSS-Dateien, Datenelemente aus dem alten CMS, Bilder und Besonderheiten zur Webserver-Konfiguration.
• Und: Je höher die Ansprüche, desto länger dauert es.

Ich gab mich nach einem halben Tag mit dem Resultat zufrieden. Da die Grav-Panne unerwartet aufgetreten war, war das mehr Zeit, als ich erübrigen konnte.

Ausserdem spielte ChatGPT Codex nicht mehr mit. Mir wurde mitten in einer laufenden Aktion mitgeteilt, ich hätte mein Nutzungslimit aufgebraucht und müsse entweder extra bezahlen oder bis zum nächsten Monat warten, um meine Arbeit fortzusetzen. Für meinen Geschmack grenzt das an Nötigung. Ich entschied mich, Claude den letzten Schliff erledigen und es dabei bewenden zu lassen.

Ein teilweise mühsames Hin und Her

Falls es euch interessiert, sei hier gesagt, dass es für den aktuellen Zustand neun Iterationen brauchte:

Die erste Fassung erfolgt anhand des letzten Snapshots von Archive.org. Ich stelle Grafikdateien und eine detaillierte Beschreibung des gewünschten Funktionsumfangs bereit.

Version 2: Umfangreiche Nachbesserungen, da mehrere Abschnitte des Onepagers fehlen oder nur halb vorhanden sind. Das Headerbild ist zu schmal beschnitten, die Schriften abgängig und das Kontaktformular sendet Eingaben nicht ab.

Version 3: Modifikation des Kontaktformulars. Statt die Eingaben per Mail zu übermitteln, was aufgrund der Spamschutzmechanismen ein fehleranfälliger Prozess ist, werden die Rückmeldungen auf dem Server gespeichert. Ein lokales Script auf meinem Rechner soll regelmässig nachsehen, ob Antworten eingegangen sind. Ob das funktioniert, wäre abzuklären.

Version 4: Die interaktive Projektübersicht fehlt. Es braucht eine detaillierte Beschreibung, um sie nachzurüsten. Ausserdem gingen die Links zu meinen Social-Media-Konten verloren. Da noch Skype und Google+ aufgeführt waren, bietet sich eine Aktualisierung an.

Im Original-Theme haben einige der Abschnitte ein Icon, das von Fontawesome stammt. Die müssen nachgerüstet werden. Und der Parallax-Scrolling-Effekt im Abschnitt Referenzen fehlt.

Version 5: Die Icons bringen die Gestaltung durcheinander; die Textplatzierung stimmt in mehreren Abschnitten überhaupt nicht mehr.

Version 6: ChatGPT hat die Texte in einzelnen Abschnitten zurechtgerückt und in anderen eine Verschlimmbesserung herbeigeführt.

Version 7: Ermüdungserscheinungen bei ChatGPT. Die Verbesserungen kommen als «Fixes», die ich selbst in die Dateien hineinbasteln muss¹. Ich verlange eine Konsolidierung, rassle aber ins Nutzungslimit.

Version 8: Claude solls richten. Eine ausführliche Beschreibung anhand des aktuellen Stands sorgt für eine Variante mit korrektem Design.

Version 9: Allerdings hat Claude den Abschnitt mit den Referenzen komplett leergeräumt und dort das Hintergrundbild verloren. Das wird mit dieser Version geflickt.

Fazit: Natürlich schön gewesen, ich hätte Zeit gehabt, nicht einfach nur die alte Website wiederauferstehen zu lassen, sondern mich neu zu orientieren oder wenigstens inhaltlich nachzubessern. Dazu reichte es dieses Mal nicht. Aber was nicht ist, kann noch werden.

Die Arbeit, so mühsam sie war, hat Erwartungen geweckt: Wie wäre es, mit einer abgefahrenen Idee zu starten? Denn anders als beim bisherigen Webdesign müssen wir uns nicht daran orientieren, was das Web an CMS-Varianten und Themes hergibt. Stattdessen überlegen wir uns eine schräge Idee und lassen nicht locker, bis die KI sie genauso realisiert hat, wie sie uns durch die Gehirnwindungen schwirrt.

Klar, dass das die nächste Stufe dieses schrägen Experiments sein wird!

Beitragsbild: Da geht noch was! (Es sei denn, die Person, deren Füsse wir hier auf der Waage sehen, wiegt sich in Pfund – dann ist es völlig okay.) (Shvets production, Pexels-Lizenz).