Alles neu – die Technik hinter der neuen Website

Vor 11 Jahren hatte ich meine Website mit dem Content Management System WordPress gebaut. Jetzt sollte es einfacher werden, weniger Overhead und ein Markdown-Editor, mit dem ich auch offline Artikel schreiben kann. Aber wie habe ich mich schlussendlich entschieden?

Einfach loslegen

Statisches HTML & CSS

Tatsächlich habe ich angefangen mit einer ganz einfachen HTML-Seite. Und natürlich ein bisschen handgeschriebenem CSS. Zurück zu den Basics.

Das hatte mehrere Gründe. Zum einen wollte ich, wie gesagt, erst mal mit möglichst wenig Komplexität starten. Große CSS-Frameworks oder ein Content Management System hätten da gleich wieder einige Anforderungen mit sich gebracht, die ich – zumindest am Anfang – nicht haben wollte. Und handgeschriebenes CSS? Ich wollte mal wieder ein paar Techniken ausprobieren, die mich schon seit einer Weile reizen, die ich aber noch in keinem Kundenprojekt integrieren konnte. Und mich hat eben auch auch der Charm von „mit so wenigen und einfachen Tools wie möglich, so viel wie möglich erreichen“ gepackt. Und tatsächlich: Mit nur etwa 200 Zeilen CSS konnte ich das semantische HTML, das ich für meine 3 einfachen Seiten geschrieben hatte, schön gestalten.

So hatte ich schnell einen Prototypen, mit dem ich meine Layout- und Design-Ideen testen konnte. Die Einfachheit war echt genial. Das wollte ich unbedingt beibehalten.

Code Deduplizieren

Eine Prise PHP

Und doch war ich schnell an dem Punkt angekommen, an dem mich die Code-Duplizierung über die einzelnen HTML-Files hinweg gestört hat. Ein dynamisches Einbinden von Abschnitten aus anderen Dateien hat halt doch seinen Sinn. Also doch wieder ein CMS nutzen? Nein. Ich wollte diesen simplen Ansatz zunächst behalten.

Aber das heißt ja nicht, dass ich ganz auf PHP verzichten muss. Mit wenigen Zeilen PHP lässt sich der HTML-<head> und das Menü in eine Datei auslagern. Auf den Seiten fix den Titel und eine ID definiert und den Part mit PHP inkludieren.

<?php
$pageTitle = "Angebot";
$pageID = "angebot";
include("parts/header.php");
?>

Dann in der parts/header.php noch die Variablen nutzen. Einerseits natürlich im <title>-Tag, aber auch um den aktuellen Menüpunkt zu visualisieren.

<title><?= $pageTitle ?></title>
<!-- ... -->
<a href="/angebot"  <?= $pageID === "angebot" ? 'aria-current="page"' : '' ?>>

Und schon war das Problem des doppelten Codes gelöst.

Und tatsächlich war das dann die erste Version, die ich hochgeladen habe. Klar, fertig war das noch lange nicht. Ich hatte noch keine richtige Startseite und erst Recht keinen Blog. Aber: klein anfangen und dann Schritt für Schritt ausbauen.

Echtes Fluid-Design

Responsiveness ohne Breakpoints dank Utopia

Die Idee hinter Utopia fand ich schon von Anfang an spannend, als ich das erste Mal darauf gestoßen bin. Größen, Abstände und Umbrüche nicht für bestimmte Breakpoints optimieren, sondern dank moderner CSS-Funktionen wie calc und clamp dynamisch definieren. So passt sich alles dem verwendeten Gerät an. Auf Smartphones werden Schrift und Abstände kleiner, auf großen Desktop-Bildschirmen größer – natürlich in gewissen Grenzen. Das wollte ich unbedingt mal ausprobieren und dieses Projekt war natürlich die perfekte Gelegenheit. Und ich finde, das Ergebnis kann sich sehen lassen. Ich bin sehr zufrieden damit, wie es geworden ist.

Auch andere CSS-Features wie ein Dark-Mode, der sich nach den Einstellungen des Betriebssystems orientiert, und das Flexbox-Layout – die alte Website ist entstanden noch einige Jahre bevor es Flexbox und Grid gab – wollte ich natürlich nutzen.

Doch ein CMS?

Static Site Generator Hugo

Da ich große Lust hatte, jetzt doch endlich mal mit dem Bloggen anzufangen, war mir klar, dass früher oder später noch was anderes her musste. Das regelmäßige Schreiben von Artikeln in HTML, das Pflegen der Listen-Seite und all die anderen Features, die ein gutes CMS so mit sich bringt (ja, ich meine z.B. RSS 😉) … all das ist mit diesen Basics dann doch ganz schön viel unnötiger Aufwand.

Aber ich mochte den einfachen Ansatz ohne viel Schickschnack. Jetzt doch noch mehr PHP schreiben, um die Artikel-Listen dynamisch zu generieren? Auch das ist dann ganz schön viel und dann bin ich ja eigentlich schon fast bei einem File-based CMS. Hm. Ein File-based CMS … ich hatte da doch vor Jahren mal gelesen von … ach wie hieß das noch?

Also rein in den Browser und recherchiert. Und schnell ist mir aufgefallen: die Auswahl ist groß. Daher habe ich mir erstmal überlegt, was ich eigentlich genau möchte. Was sind meine Anforderungen?

  • Möglichst einfaches Templating
  • Blog-Support (Tags, Kategorien, Pagination, …)
  • Inhalte schreiben mit Markdown (ich mag Markdown einfach sehr und habe mich inzwischen durch das Schreiben von Dokumentationen und Issues und allem Möglichen so sehr daran gewöhnt, dass ich gerne den Blog auch in Markdown schreiben möchte)
  • Einfacher Betrieb

Also eigentlich gar nicht so viel.

Nach etwas Recherche bin ich dann beim Static Site Generator »Hugo« gelandet. (Tatsächlich habe ich im Nachhinein festgestellt, dass ich einen Link zu Hugo schon länger auf meiner „mal anschauen“-Liste hatte.) Dieses System hat alle meine Anforderungen erfüllt und wirkte flexibel, aber übersichtlich. Die Go-Templating-Language ist zwar nicht ganz mein Fall – ich kenne sie von der Arbeit bei mittwald z.B. von Helm-Charts –, aber da würde ich bestimmt reinfinden.

Also habe ich damit einfach mal angefangen.

Das System installiert, die PHP-Dateien in Layout-Files umgewandelt, die Inhalte in Markdown umgewandelt, ein bisschen an der 404-Page getüftelt und schon war sie fertig: die Version 2.0 der neuen Website mit Hugo.

Ein paar Tage später habe ich mich dann auch noch an ein dynamisches Menü gewagt. Das hatte ich zunächst statisch belassen – einer der schönen Aspekte an Hugo, das alles auf HTML-Templates basiert und man daher nur die Features nutzen muss, die man grade möchte. Und dann wollte ich natürlich auch noch den Blog haben. So habe ich den ersten Artikel geschrieben, parallel die Index-Seite aufgebaut und Pagination ausprobiert. Das lief alles erstaunlich gut.

Also ab, live damit. Das Deployment ist auch denkbar einfach: Der Static Site Generator generiert – nun ja – statische HTML Seiten, die man ganz einfach per rsync auf einen Server schieben kann und zack, fertig.

Fazit

Klein Anfangen hat seinen Reiz

Einfach mal mit wenig Komplexität loslegen war definitiv eine gute Idee. Ich bin mit Hugo als „CMS light“ grade sehr zufrieden. Ich brauche kein Multi-Autoren-Feature, keine Tracking-Plugins oder sonstige Spielereien. Die Einfachheit ist mir grade lieber. Es hat großen Spaß gemacht, neue Technologien auszuprobieren und ich habe unterwegs wieder einiges gelernt. Als Nächstes habe ich mir vorgenommen, den Blog zu füllen; mit Artikeln und vielleicht ja schon ersten Tags. Achja – und RSS wollte ich ja auch noch einbauen.