Unsere neue Website ist online

Unsere Website ist neu – aber man sieht es nicht! Wir haben WordPress durch eine statische, moderne Lösung ersetzt. In diesem Artikel erfährst du, warum wir diesen Schritt gegangen sind, wie unser neuer Workflow aussieht und was wir daraus gelernt haben.

Wir freuen uns, euch mitteilen zu können, dass unsere neue Website nun online ist! In diesem Artikel möchten wir erklären, warum wir unsere alte WordPress-Seite durch eine statische Website ersetzt haben – und welche Vorteile das mit sich bringt.

Zufriedenheit mit WordPress

Zunächst möchten wir betonen, dass wir mit WordPress grundsätzlich zufrieden waren. WordPress bietet eine einfache Möglichkeit, neue Inhalte zu veröffentlichen, insbesondere für unseren Blog. Wir hatten gehofft, dass automatische Updates den Wartungsaufwand reduzieren und uns somit Zeit sparen würden. Die Gründe für unsere ursprüngliche Entscheidung für WordPress waren daher klar: flexible Inhaltspflege ohne großen technischen Aufwand und automatisierte Sicherheitsupdates.

Die Realität

In der Praxis war das Hinzufügen neuer Blogartikel allerdings überraschend umständlich. Das lag vermutlich am verwendeten Theme – wir hatten versucht, möglichst nahe am “Default” zu bleiben, um Komplexität zu vermeiden. WordPress bietet eine Vielzahl an Vorlagen, Editoren und Plugins. Da wir keine besonderen Funktionen wie Shop oder Login brauchten, wollten wir die Seite möglichst schlank halten. Trotzdem mussten wir nach Updates häufig manuell eingreifen – z. B. weil sich mit der neuen Version des Plug-ins “Spectre” die Default-CSS-Werte geändert hatten und unser Layout plötzlich anders aussah.

Unsere Lösung: Eine statische Website

Auf Basis dieser Erfahrungen haben wir beschlossen, eine statische Website zu entwickeln. Das bedeutet konkret: Wir erstellen eine Seite ohne dynamischen Anteil. Es gibt keinen Login oder Editor im Browser. Änderungen an Inhalten erfolgen direkt im Quellcode und müssen wieder veröffentlicht werden. Das klingt erstmal nach einer Lösung nur für Softwareentwickler – und das ist sie zu einem gewissen Grad auch. Aber wir sind überzeugt, dass man mit etwas Anleitung auch ohne tiefere Technikkenntnisse damit zurechtkommen kann.

Im Folgenden beschreiben wir unseren Weg eine solche Seite zu entwickeln und dann zu betreiben sowie die Inhalte zu aktualisieren.

Ein statischer Code-Generator: Hugo

Eine statische Seite bedeutet nicht, dass wir unsere Inhalte in “Plain-HTML” programmieren müssen, zumindest nicht alles :-). Wir wollen unsere Inhalte in einem einfachen Text-Format bereitstellen. Das Ziel ist, dass jeder an seinem eigenen Computer im Texteditor seiner Wahl, die Inhalte anpassen und vergleichen kann. Um dies zu ermöglichen nutzen wir Hugo, einen statischen Webseiten-Generator. Mit Hugo können einfache Texte, geschrieben in Markdown in vollständige HTML-Webseiten übersetzt werden. Es wird aus einfachem Text also eine ganze Website generiert.

Hugo benötigt zur Erstellung einer Website neben den eigentlichen Inhalten auch sogenannte Themes, also Vorlagen für das Layout und Design. Es gibt eine große Auswahl an fertigen Themes, aber wir haben uns entschieden, ein eigenes zu entwickeln – ganz im Sinne unseres Anspruchs, Dinge gerne individuell und technisch fundiert umzusetzen. Für diesen Teil ist technisches Know-how erforderlich.

Wir wollen in diesem Blog-Artikel einen Einblick in unsere Vorlagen und genutzten Technologien geben, aber auch den einfachen Workflow zur Veröffentlichung eines neuen Blog-Artikels zeigen.

Das Aussehen der Webseite: Tailwind CSS

Wir verwenden Hugo für den Aufbau und die Struktur der Seite. Text wird dabei in HTML-Elemente umgewandelt und auf der Seite arrangiert. Nur das Aussehen lässt dabei noch zu wünschen übrig. Im Web wird für das Aussehen CSS verwendet, Cascading Style Sheets. Leider kann es ziemlich aufwendig sein für alle Elemente den entsprechenden Style zu hinterlegen. Vor allem wenn unterschiedlichste Geräte von hochauflösenden Computer-Bildschirmen im Querformat, bis zu sehr kleinen Smartphone-Bildschirmen im Hochformat unterstützt werden sollen, stellt das Styling eine größere Herausforderung dar.

Um das Schreiben von CSS zu vereinfachen, haben wir uns für Tailwind CSS entschieden, ein Low-Level-CSS-Framework, das mit sog. Utility-Klassen arbeitet. Tailwind CSS ermöglicht es uns, alle Informationen über das Aussehen eine Elements direkt im HTML-Code zu hinterlegen, ohne dass wir uns um das Schreiben von benutzerdefiniertem CSS kümmern müssen. Dafür bietet Tailwind CSS vordefinierte Klassen, die eine einheitliche Darstellung in unterschiedlichen Browsern garantieren und Funktionen für die Responsiveness, also die Darstellung auf unterschiedlich großen Bildschirmen, bieten.

Tailwind CSS ist dabei ein “Übersetzer”. Es werden die annotierten Klassen in CSS-Anweisungen übersetzt und so in die statisch generierte Seite von Hugo eingebunden. Der große Vorteil von Tailwind CSS gegenüber vollumfänglichen Oberflächenframeworks wie Angular, React oder Vue ist dabei, dass wir keinerlei Abhängigkeiten (JavaScript) in unsere Webseite mit aufnehmen. Dies hilft bei der Wartung und Aktualisierung der Seite: Weniger Abhängigkeiten bedeuten weniger Risiko für Sicherheitslücken oder Änderungen, nach denen wir manuell Anpassungen durchführen müssen.

Unser neuer Workflow

Mit dieser neuen Struktur können wir neue Blog-Artikel ganz einfach in Markdown schreiben und in ein Git-Repository einchecken. Nach dem Commit wird die Seite automatisiert durch Tailwind CSS und Hugo gebaut und anschließend auf einen internen Test-Server kopiert. Somit können wir gemeinsam neue Inhalte bewerten und Änderungen direkt auf unterschiedlichen Geräten testen.

Beispiel: Ein Blog-Artikel

Nun aber genug zur Begründung: Jetzt kommen wir zu den technischen Details.

Was würde sich denn besser als Beispiel eignen als genau dieser Blog-Artikel?

Zunächst einmal wurde dieser Blog-Artikel als Markdown-Datei angelegt und geschrieben. Die Datei sieht dabei, etwas gekürzt, so aus:

 1+++
 2title = "Unsere neue Website ist online"
 3description = "Unsere Website ist neu – aber man sieht es nicht! Wir haben..."
 4date = 2025-05-21T09:00:00
 5draft = false
 6
 7authors = ["Hannes"]
 8categories = ["uxitra"]
 9tags = ["Website", "Meilenstein", "uxitra"]
10
11readingtime = "8 min"
12readingtimeiso = "PT8M"
13abstract = "Unsere Website ist neu – aber man sieht es nicht! Wir haben..."
14
15[title_image]
16src = "image.png"
17alt = "Screenshot unserer Website"
18
19+++

Ganz oben in der Datei sind die Meta-Informationen. Hier legen wir beispielsweise fest, in welchen Kategorien und mit welchen Tags der Artikel erscheinen soll. Technisch-versierten Lesern fällt an dieser Stelle bestimmt auf, dass dies kein Markdown ist: Korrekt. Diese Informationen werden im “toml”-Format bereitgestellt und können per Variablen in den Hugo-Vorlagen zur Erstellung der HTML-Elemente verwendet werden. So nutzen wir z. B. die Variable “readingTime” um die Lesedauer über dem eigentlichen Artikel anzuzeigen.

20Wir freuen uns, euch mitteilen zu können, dass unsere neue Website nun online ist!
21In diesem Artikel möchten wir erklären, warum wir unsere alte WordPress-Seite durch eine statische Website ersetzt haben – und welche Vorteile das mit sich bringt.
22
23## Zufriedenheit mit WordPress
24
25Zunächst möchten wir betonen, dass wir mit WordPress grundsätzlich zufrieden waren.
26WordPress bietet eine einfache Möglichkeit, neue Inhalte zu veröffentlichen, insbesondere für unseren Blog.
27Wir hatten gehofft, dass automatische Updates den Wartungsaufwand reduzieren und uns somit Zeit sparen würden.
28Die Gründe für unsere ursprüngliche Entscheidung für WordPress waren daher klar: flexible Inhaltspflege ohne großen technischen Aufwand und automatisierte Sicherheitsupdates.
29
30// ...

Danach folgt der eigentliche Inhalt in Markdown.

Wie aber wird daraus jetzt ein ansehnlicher Blog-Artikel?

Templates für das Rendering

Zur Übersetzung von Metainformationen und Markdown verwendet Hugo sogenannte Templates. Diese Templates werden mit Go-Templates definiert, also einer Kombination aus HTML und der Programmiersprache Go.

Hier ein Ausschnitt der Templates für einen Blog-Artikel:

 1{{ define "main" }}
 2
 3<div class="container bg-[#10414599] max-w-[1200px] pt-6">
 4  {{ partial "blog/navigation" . }}
 5</div>
 6
 7{{ with .Params.title_image }}
 8<img src="{{ $.Resources.Get .src }}" alt="{{ .alt }}"
 9  class="container p-0 max-w-[1200px] max-h-[500px] object-cover" />
10{{ end }}
11
12<article class="blog-article container bg-[#10414599] max-w-[1200px]">
13
14  <div class="flex gap-x-10 pt-10 flex-wrap">
15    <div class="flex gap-x-5 md:gap-x-10 grow">
16      {{ with .GetTerms "authors" }}
17      {{ range . }}
18      {{ $author_info := .Params }}
19      <p class="uppercase text-l font-bold">{{ $author_info.name }}</p>
20      {{ end }}
21      {{ end }}
22    </div>
23
24    <div class="flex gap-x-5 md:gap-x-10">
25      <p class="text-blog !text-left !hyphens-none">{{ .PublishDate | time.Format ":date_long" }}</p>
26      {{ with .GetTerms "categories" }}
27      <p class="text-blog !text-left !hyphens-none">{{ range . }}
28        <a class="text-text hover:text-accent" href="{{ .RelPermalink }}" aria-label="Kategorie: {{ .Data.Term }}">{{
29          .Data.Term }}</a>
30        {{ end }}
31      </p>
32      {{ end }}
33      {{ with .Params.ReadingTime }}<p class="text-blog !text-left !hyphens-none">{{ . }}</p>{{ end }}
34    </div>
35  </div>
36
37  <h1 class="mb-4">{{ .Title }}</h1>

Dieser Ausschnitt produziert die HTML-Seite des Blog-Artikels bis zum Titel.

Template-Hierarchie

Zunächst, in Zeile 1, wird ein main-Block definiert. Dies ist wichtig, da mit dieser Markierung der Blog-Artikel in die vollständige Seite “eingesetzt” wird. Das bedeutet, unser Website-Header sowie der Footer sind in einem Extra-Template definiert. In diesem Template ist ein Platzhalter namens “main” vorgesehen. An dieser Stelle wird nun der Blog-Artikel eingesetzt.

Auch das Template des Blog-Artikels setzt weitere Inhalte ein. In Zeile 4 wird, als Beispiel, die Blog-Navigationsleiste eingefügt.

Metainformationen, Parameter und Schleifen

Der eigentliche Inhalt des Blog-Artikels wird mit Parametern eingefügt. In Zeile 7 wird geprüft, ob ein Titelbild für diesen Artikel hinterlegt wurde. In diesem Fall wird das Titelbild eingesetzt und entsprechend ausgerichtet.

Ab Zeile 14 werden die Metainformationen, wie der Autor, das Datum, die vergebenen Kategorien und die Lesezeit, zur Seite hinzugefügt. Da mehrere Autoren gemeinsam an einem Blog-Artikel arbeiten können, wird in Zeile 17 mit Hilfe des range-Keywords über die Liste der Autoren iteriert.

Letztendlich wird in Zeile 37 der Titel des Artikels als Überschrift gerendert, danach folgt der Markdown-Inhalt.

Fazit

Mit dieser neuen Lösung bringen wir viele Prinzipien aus unserer Softwareentwicklung auf unsere Website: Versionskontrolle, Qualitätssicherung, klare Trennung von Inhalt und Darstellung. Nach dem initialen Aufwand zur Einrichtung ist das Aktualisieren der Inhalte nun einfacher, nachvollziehbarer – und für uns als Software-Ingenieure deutlich angenehmer als mit WordPress.

Falls euch unsere Vorgehensweise neugierig gemacht hat: Sprecht uns gerne an!