Migration zu Ghost
Handlebars und CSS: Was leichtfällt und was fehlt
Seit mehr als 15 Jahren lief diese Domain mit Wordpress. Seit einigen Wochen läuft hier das Publishing-System Ghost und ich habe eine Menge Erfahrungen gemacht. Was der Blick über den Tellerrand bewirkt beschreibe ich in dieser Artikelstrecke – kulturell, kognitiv und technisch.
Gestaltung war für mich nie das Beiwerk zur Technik, sondern integral. Ein Publishingsystem soll Texte tragen, und wie es das tut, entscheidet darüber, ob jemand bleibt oder weiterklickt. Bei Ghost hat mich überrascht, wie sehr das System dieser Haltung entgegenkommt, denn der saubere DOM-Tree und die schlanke Template-Sprache nehmen einem genau die Reibung, an der man unter WordPress oft scheitert heraus. Aus den Anforderungen, die ich zu Beginn der Strecke benannt habe, ist so ein Gestaltungsgerüst geworden, und dieser Weg von der Bedingung zur Form soll nun Thema dieses Teils sein.
Anspruch zu Form
Den Anfang machte eine Entscheidung gegen die Üppigkeit vieler Seiten. Mein Ansatz ist ein klarer einfacher Aufbau, angelehnt an Programmhefte. Kein komplexer zweispaltiger Kopf mehr, der Rechenzeit im Browser kostet und einfach unglaublich komplex in der Darstellung mit CSS wurde. Stattdessen ist es eine zentrierte Textachse von 920 Pixeln Lesebreite, in die der Inhalt ruhig fällt.
Spannung entsteht nicht durch Dekor, sondern dadurch, dass Bilder und Videos über die Textbreite behutsam hinausragen, in Ghosts eigenen Maßen für breite und randlose Medien. Das Blog bleibt bewusst auf Text gebaut, ohne verspielte Elemente wie seitwärts scrollende Artikelreihen, die ich für eine modische Sackgasse halte.
Allerdings ist interessant, wohin mich dieser Purismus geführt hat. Zurück zu einer Idee, die ich vor gut zehn Jahren hatte und mit Feuereifer umgesetzt hatte: Abgerundete Ecken über border-radius. Heute heißt das „Card-Design“ und ich nutze es natürlich viel rücksichtsvoller als damals – hoffentlich. Eine Zeitlang habe ich sie gemieden, inzwischen sind sie fast verpönt, weil man sie mit der glatten Bildsprache künstlicher Intelligenz assoziiert.
Ich habe mich dennoch für sie entschieden, und zwar aus einem pragmatischen Grund, nämlich arbeitet Ghost an vielen Stellen mit Karten, und ich wollte mir die Arbeit nicht dadurch erschweren, dass ich gegen das Card-Design anbaue, statt es aufzunehmen. Man wird ja schließlich reifer und kann auch mal etwas annehmen.
Die runden Ecken finden sich nun an Bildern, an den Karten der Übersicht, an den Schaltflächen, und sie geben dem Ganzen eine ruhige Verwandtschaft. In den Footer habe ich eigene Felder eingebaut.
Schrift mit Haltung
Bei der Typografie wird die Verbindung von Anspruch und Technik am deutlichsten. Ich kombiniere Crimson Pro für den Fließtext mit Plus Jakarta Sans für Überschriften und Navigation, beide sind variable Schriften. Vorher stand Poppins an der Stelle von Plus Jakarta Sans, und ich finde Poppins gefälliger, doch sie ist nicht variabel, hätte mehrere Schnitte und damit mehrere Verbindungen zwischen Client und Server erzwungen. Gerade weil ich starke Fettungen brauche, fiel die Wahl auf den variablen Schnitt, der den ganzen Gewichtsbereich aus einer Datei bedient. Beide sind zudem als Google-Schriften verbreitet, was die Chance erhöht, dass sie im Zwischenspeicher des Nutzers schon vorliegen, doch ausgeliefert werden sie ausschließlich von meinem eigenen Server, nicht von Google Fonts oder einem Drittdienst.
Eindruck vor technischen Ladezeiten
Eine technische Feinheit, auf die ich einigen Wert lege, betrifft das Ladeverhalten. Ich habe bewusst auf den Wert swap im Font-CSS verzichtet. Dieser zeigt den Text sofort in einer Ersatzschrift und tauscht ihn aus, sobald die eigene Schrift geladen ist, was einen sichtbaren Sprung im Layout erzeugt, der Fachausdruck ist FOUT – also Flash of Unstyled Text. Mir ist dieser Sprung lästiger als eine kurze Verzögerung, also nehme ich das Gegenteil in Kauf: Der Text bleibt zunächst unsichtbar, bis die Schrift da ist, und erst wenn moderne Browser nach etwa drei Sekunden die Geduld verlieren, zeigen sie die Seite mit der Ersatzschrift an. Dies ist ein guter Kompromiss aus meiner Sicht und ich habe also längere Ladezeit gegen gestalterische Kontrolle getauscht.
Ausschlaggebend war noch vor einigen Jahren das Smartphone bei schlechter Verbindung – in der U-Bahn, auf dem Land – doch hat sich dieser Anwendungsfall entschärft, weil selbst die günstigen Mobilfunktarife inzwischen erstaunlich gut tragen.
Geblieben ist der Vorsatz, die Zugänglichkeit sauber umzusetzen, weshalb die ARIA-Attribute, die Bedienhilfen für assistive Technik, ordentlich gesetzt sind und die Bewegungseffekte über prefers-reduced-motion abschaltbar bleiben.
Farbe und ihre Grenzen
Bei den Farben habe ich mich zurückgenommen, deutlich gegenüber meinem früheren Schwarz-Gelb. Das Gelb ist mit einem weinenden Auge fast verschwunden und lebt nur noch in dezenten Akzenten, geblieben ist mein Petrol, ein tiefes Blaugrün. Gerade dieses Petrol ist schwierig zuverlässig anzuzeigen, weil es ein im RGB-Raum recht spezifischer Ton ist, und damit beginnt ein Lehrstück über die Grenzen der Bildschirmfarbe.
Gewünscht hätte ich mir ein leuchtendes Signalorange, Pantone 021 C, ein Ton, den ich so sehr mag, dass ich ihn mir sogar als Futter in die Anzüge nähen lasse.
An diesem Orange bin ich gescheitert, und zwar nicht wegen oder mit Ghost, sondern an der Physik der Bildschirme. Leuchtende, stark gesättigte Farben geben die wenigsten Displays verlässlich wieder, weil jedes Panel einen anderen Farbraum abdeckt. Schon auf meinen sieben Apple-Geräten erscheint der Ton leicht verschieden, zwar nahe beieinander, aber nicht gleich. Und auf einem Dell- oder Sony-Bildschirm geriet alles durcheinander. Zu viele Parameter beeinflussen einen so speziellen Wert, und weder der RGB-Raum noch das HSL-Modell retten ihn.
Aus dieser Erfahrung halte ich mich nun im kontrastreichen, robusten Bereich auf, wo die Farbe trägt und mich nicht enttäuscht oder gar in Entsetzen bringt. Es ist die unscheinbarste, aber vielleicht lehrreichste Lektion des ganzen Projekts, dass das Web seine Farben auch im Jahr 2026 immer noch nicht garantieren kann.
Die Überschriften der zweiten Ebene habe ich mit einem Schereffekt versehen, der sich beim Scrollen aufrichtet, verbunden mit einer Veränderung der Farbintensität, und auch das bleibt für Nutzer mit reduzierter Bewegungspräferenz aus. Auf den Links liegt der Text-Scramble-Effekt, eine dezente Animation, die ich aus meinem alten Theme herübergerettet habe.
Wo Ghost an Grenzen stößt
Nicht alles ließ sich lösen, und ich will die offenen Stellen so klar benennen wie die gelungenen. Für ausgewählte Artikel habe ich einen eigenen Beitragsstil als Handlebars-Template gebaut. Das ist in etwa wie eine PHP-Template-Datei in Wordpress. Ich brauche ein Dossier-Layout, das ich nicht auf jeden Text ausrolle, aber bei manchen Themen für lohnend halte. Dort rendere ich das Aufmacherbild mobil im Querformat, auf dem Desktop im Hochformat, und genau hier zeigt sich eine Schwäche von Ghost. Es fehlt der definierte Fokuspunkt in Bildern, mit dem WordPress den wichtigen Bildausschnitt markieren konnte, sodass ein automatischer Beschnitt immer richtig zentriert ist. Ghost kennt das nicht.
Um den Header interessant zu gestalten, bei gleichzeitiger einfacher Wartung, behelfe mir mit einem künstlerischen Griff: Dasselbe Bild liegt ein zweites Mal im Hintergrund. Da es die gleiche Datei wie das Feature-Image /Artikelbild ist, muss die Datei nur einmal geladen werden, spart also Traffic. Dort, im Hintergrund ist es in voller Breite, stark per CSS weichgezeichnet, mit einem Schatten nach unten links, einer feinen Kontur und einem Verlauf, was dem Aufmacher Tiefe gibt und den ungenauen Ausschnitt verzeiht.
<!-- Aufmacher mit unscharfem Hintergrund desselben Bildes -->
<figure class="dossier-hero">
<div class="dossier-bg" style="background-image:url('{{img_url feature_image}}')"></div>
<img src="{{img_url feature_image size='m'}}" alt="{{title}}">
</figure>
Ein Restproblem bleibt der Kontrast über so unterschiedlichen Bildern, doch dafür wird sich eine Lösung finden.
Eine Lücke aber bleibt offen und ärgert mich. Das Drop Cap, der große Schmuckbuchstabe am Absatzanfang, war mir gestalterisch immer wichtig, und ich habe es nicht sauber in Ghost zum Laufen gebracht. Die naheliegende Regel über das erste Zeichen des ersten Absatzes scheitert daran, dass mein einleitender Absatz gefettet ist, und Ghosts Editor bietet über die Oberfläche keine Möglichkeit, einem Absatz eine eigene Klasse zu geben. Die Auswege, die das System lässt, laufen alle darauf hinaus, Code in ein kleines Eingabefeld zu schreiben, und das lehne ich für den redaktionellen Alltag ab. Das Drop Cap bleibt damit ungelöst, und ich benenne es als das, was es ist, eine Grenze des Systems, kein Versäumnis der Mühe.
Verwandt damit ist die schon erwähnte fehlende Medienverwaltung. Im Frontend gibt es bei mir durchaus ein Feld für den Bildnachweis, die Anzeige funktioniert. Was fehlt, ist die zentrale Verwaltung dieser Nachweise, eine Mediathek, in der sich Urheber und Lizenz pflegen lassen, wie ich sie mir in WordPress aufwendig eingerichtet hatte. Für jemanden mit großem Bildarchiv ist das mehr als eine Lappalie.
Ein Wort zum Wandel
Beim Bauen ist mir aufgefallen, wie sehr sich die Gestaltung von Websites in den letzten Jahren verlangsamt hat. Vieles ist moderner geworden, im Kern aber hat es sich angeglichen, und einen merklichen Anteil daran trägt irgendwie Apple mit der Formensprache seiner Betriebssysteme.
Ein eigentümliches Gegenphänomen ist der Neo-Brutalismus, der die Seiten in eine Ästhetik der 2000er zurückführt, die ihtor
rerseits die Neunziger zitiert, vereinfacht und doch grell und bunt. Darüber ließe sich ein eigener Artikel schreiben, und vielleicht tue ich das einmal.
Patrick Pehl
Vorerst: Fazit der Migration
Bleibt die Frage, für wen sich dieser Wechsel lohnt. Für mich war er richtig, weil ich wieder publizieren wollte und nicht verwalten, weil mir die kleinere Angriffsfläche und das abgeschaltete PHP Ruhe geben, und weil Ghost beim Gestalten erstaunlich wenig im Weg steht. Wer schreibt, einen klaren, schnellen Auftritt will und bereit ist, Betrieb und Sicherung selbst zu verantworten, wird hier glücklich. Abraten würde ich jenen, die eine pflegeleichte Mediathek brauchen, die ihre Inhalte in Kategorien mit eigenständigen Übersichten ordnen wollen, oder die einen festen Podcast-Workflow haben, denn an diesen Stellen verlangt Ghost Kompromisse oder externe Lösungen. Und wer das tägliche Aktualisieren im Container scheut, sollte den Weg über die Ghost-CLI gleich mitdenken, den ich für mich als nächsten Schritt vorgesehen habe.
Am Ende ist dieser Umzug weniger eine technische als eine grundsätzliche Entscheidung gewesen, die alte Frage, wie viel Hand man selbst am eigenen Werk behalten will. Ghost gibt mir mehr davon zurück, als WordPress es zuletzt tat, und nimmt mir dafür an anderer Stelle Bequemlichkeit. Diesen Tausch gehe ich gerade gerne ein. Jedoch ist mir bewusst was noch fehlt.
