Neue Website - Warum und wie
Die alte Version war mit WordPress aufgesetzt. In Zeiten von Progressive Web Apps (PWA), Headless-CMS und REST-APIs gehört WordPress wohl eher zu einem Relikt vergangener Zeiten. Den Umbau hatte ich also schon lange vor und habe ihn nun endlich umgesetzt. Wie die aktuelle Website aufgesetzt ist, erkläre ich in diesem Artikel.
Kurzzusammenfassung
| Kategorie | Umsetzung |
|---|---|
| Quelltexte | gitlab.com/TomRiedl/tomriedl.com |
| Tickets | gitlab.com/TomRiedl/tomriedl.com/-/issues |
| Hosting | Serverprofis |
| TLS | Let's Encrypt |
| CMS/Framework | Codedoc |
| Tools | Visual Studio Code, GitKraken, GitLab Web-IDE |
Vorher - Nachher
Screenshot der alten Version
Screenshots der aktuellen Version
| Kategorie | Vorher | Nachher |
|---|---|---|
| Website-Technologie | • WordPress, PHP | • Statische Website ohne server-side Rendering • Codedoc |
| Verwaltung der Inhalte | • Admin-Panel von WordPress | • Alle Artikel/Seiten liegen als Markdown-Dateien in einem Repository bei GitLab • Änderungen entweder lokal und Git Commit/Push oder GitLab-Web-IDE |
| Versionierung | • keine | • Semantic Versioning |
| Nachverfolgbarkeit der Änderungen | • keine | • Changelog • Versionshistorie |
| Progressive Web-App | • keine | • in Arbeit |
Lighthouse-Tests
Die Tests mit Lighthouse zeigen eine deutlichere Verbesserung. Mit der Optimierung bin ich allerdings noch nicht ganz fertig, da kann ich sicherlich noch etwas mehr optimieren.
| Kategorie | Vorher | Nachher |
|---|---|---|
| Mobile |  |  |
| Desktop |  |  |
Design
Design kann man es wohl nicht nennen; für den designlosen und schlichten Ansatz habe ich mich bewusst entschieden. Diese Website soll Informationen liefern, da ist ein hübsches Design zwar nett aber unnötig. Jedoch: Die Website unterstützt einen Dark- und Light-Mode (kann durch einen Klick rechts oben geändert werden).
Hosting
Die Homepage wird bei Serverprofis gehostet. Nachdem ich schon viele Hoster durchprobiert habe, wie All-Inkl, 1&1, HostEurope, DomainFactory und Strato, bin ich nun schon seit einigen Jahren zufrieden bei Serverprofis und Hetzner. Websites hoste ich bei Serverprofis, da deren Preis-Leistung sehr gut ist, der Support schnell und kompetent ist und sie kostenlos die Homepages mit TLS-Zertifikaten von Let's Encrypt versehen (leider ist das bei vielen anderen Hostern noch kein Standard und man muss für die Zertifikate noch extra zahlen). Für Docker-Hosting und andere Serveranwendungen verwende ich die Hetzner Cloud (wird aber für tomriedl.com nicht benötigt).
Cookies und Analytics
Warum kommt kein Cookie-Banner? Weil keine Cookies gespeichert werden. Ich mag es nicht, wenn ich im Internet überall getrackt werde und deshalb gibt es auf meiner Homepage keine Cookies, kein Google-Analytics und auch keine Server-Logs. Weiterhin werden keine Scripte von anderen Domains geladen. Alle Scripte, Designs, Fonts werden direkt von tomriedl.com gehostet.
Warum Codedoc
Codedoc erzeugt aus Markdown-Dateien HTML-Dateien. Somit kann man aus einer Sammlung von Markdown-Dokumenten eine Website erzeugen. Der Fokus von Codedoc liegt in der Erstellung von Dokumentationen für Software bzw. für Quelltexte.
Codedoc ist ein statischer Webseitengenerator; davon gibt es unglaublich viele. Für Codedoc habe ich mich aus folgenden Gründen entscheiden:
- Basisdateien sind Markdown (.md).
- Verwendet TypeScript statt JavaScript als Primärsprache.
- Erweiterbar durch Plugins.
- Gute Darstellung von Quelltext.
- Live-Reload - Beim Live-Reload kann man die Website lokal ausführen und bei einer Änderung in einer Markdown-Datei wird sofort die Seite in HTML übersetzt und der Browser automatisch aktualisiert.
- Funktioniert ohne JavaScript - Öffnet man die Seite mit einem JavaScript-Blocker, wie NoScript oder uMatrix (Firefox/Chrome) funktioniert diese auch bei geblockter Code-Ausführung.
- Dark/Light-Theme-Unterstützung.
- Verwendet keine Cookies.
Static Website
Durch das Erzeugen von HTML-Dateien aus Markdown wird auf Serverseite nur ein File-Server benötigt, da kein server-side Rendering durchgeführt werden muss. Das hat folgende Vorteile:
- Die Website wird deutlich schneller
- Es gibt weniger Angriffspunkte für Hacks
- Ein Umzug zu einem anderen Hoster ist einfacher
- Man wird unabhängig von Serversoftware (PHP-Versionen, etc.)
- Progressive Web-Apps sind mit Static Websites leichter umzusetzen
Warum Open-Source
Die Quelltexte, sowie die Deploy-Skripte sind öffentlich in folgendem Repository einsehbar:
https://gitlab.com/TomRiedl/tomriedl.com/
Den Code der Website habe ich aus folgenden Gründen öffentlich verfügbar gemacht:
- Die Website wird dadurch komplett nachverfolgbar. Jedes Release und jede Änderung bleibt für immer im Repository einsehbar. Siehe Changelog-Seite.
- Die Scripte und Deploy-Prozesse sind eventuell für andere Personen/Firmen interessant.
- Andere Personen können Fehler korrigieren oder selbst eigene Artikel schreiben.
Wenn dir also die Struktur und die Technik der Website gefällt, kannst du einfach das Repository kopieren und auf dieser Basis eine eigene Website aufsetzen, ohne großen Initialaufwand.
Deploy
Mirroring
Das Repository gitlab.com/TomRiedl/tomriedl.com wird über die GitLab-Bordmittel automatisch zu einer GitLab-Instanz unserer Firma gepusht.
Der Grund hierfür ist, dass ich die SFTP-Zugangsdaten für den Webserver (das spätere Deploy-Ziel) nicht direkt auf gitlab.com speichern möchte. Die Zugangsdaten sind als CI-Variablen gespeichert.
Build-Pipeline
Mit jeder Änderung des Quelltextes wird eine Build-Pipeline angestoßen. Die Pipeline selbst durchläuft folgende Stages:
- Preparation - Meta
Hier werden aus dem Repository Meta-Informationen ausgelesen, diese werden primär für die Versionierung verwendet. - Build
Das Erzeugen der HTML-Dateien aus den Markdown-Dateien. Weiterhin werden in diesem Schritt die sitemap.xml und die Tag-Pages erzeugt. - Test
Beim Test wird ein lokaler Webserver gestartet, und die Website auf ungültige Links überprüft. - Deploy
Dieser Job lädt die fertige und geprüfte Website auf den Webserver hoch. Der Job wird nur auf der Firmen-Instanz ausgeführt (siehe Mirroring oben).
Versionierung
Nur getaggte Versionen des release-Branches werden auf tomriedl.com deployed und vor dem Upload mit einer semantischen Versionierung versehen. Die aktuelle Version kannst du im Hauptmenü sehen: 
Die Versionshistorie findest du bei GitLab.
Online-Editor
Für gewöhnlich editiere ich die Seite über Visual Studio Code und verwalte das Repository über GitKraken. GitLab verfügt jedoch über eine mehr als ausreichende Web-IDE über die es möglich ist, die gesamte Website über den Browser zu bearbeiten.
Somit kann ich auch schnell unterwegs oder auf meinem Handy einen Artikel editieren.
Website lokal öffnen
Zum lokalen Entwickeln kann über Codedoc ein Web-Server mit Live-Reload gestartet werden. Damit man Codedoc und die nötigen Abhängigkeiten nicht auf seinem Rechner installieren muss, habe ich hierfür einen Docker-Image erstellt: https://hub.docker.com/repository/docker/cyancor/codedoc (Quelltext). Zum Starten reicht es, das Script serve.cmd auszuführen. Das Script ist so geschrieben, dass es auf Linux, Windows und MacOS lauffähig ist.
Progressive Web-App
Die Website als Progressive Web-App ist noch nicht umgesetzt. Sobald ich diese Seite zu einer PWA umbaue, schreibe ich dazu einen eigenen Artikel mit Anleitung.
Mitgestaltung und Feedback
Zur Mitgestaltung der Website hast du folgende Möglichkeiten:
- Ticket erstellen: Alle offenen Tickets siehst du hier: https://gitlab.com/TomRiedl/tomriedl.com/-/issues
Solltest du einen Fehler gefunden haben oder dir einen Artikel zu einem bestimmten Thema wünschen, kannst du jederzeit ein neues Ticket erstellen (hierfür benötigst du einen gitlab.com-Account). - Quelltext editieren: Du kannst jederzeit Inhalte korrigieren und sogar eigene Artikel als Gastbeitrag erstellen. Nach einem Review der Änderungen können diese dann in den Release-Branch gemerged werden. Hierzu gehst du folgendermaßen vor:
1. Einen Fork des Repositories erstellen: https://gitlab.com/TomRiedl/tomriedl.com/-/forks/new
2. Die Änderung in deinem Repository durchführen
3. Einen Merge-Request an mich stellen
Tags: homepage · website · codedoc · hosting · pwa · progressive-web-app · gitlab
Seite editieren
Der Quelltext der Seite ist Open-Source und kann hier eingesehen werden (zum Editieren bitte einen Merge-Request stellen, Gastbeiträge sind ebenfalls erwünscht).