Tom Riedl

Neue Website - Warum und wie

Tom Riedl Logo klein

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

KategorieUmsetzung
Quelltextegitlab.com/TomRiedl/tomriedl.com
Ticketsgitlab.com/TomRiedl/tomriedl.com/-/issues
HostingServerprofis
TLSLet's Encrypt
CMS/FrameworkCodedoc
ToolsVisual Studio Code, GitKraken, GitLab Web-IDE

Vorher - Nachher

Screenshot der alten Version

Screenshot tomriedl.com alte Version

Screenshots der aktuellen Version

Screenshot tomriedl.com neue Version dunkel Screenshot tomriedl.com neue Version hell

KategorieVorherNachher
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• keineSemantic Versioning
Nachverfolgbarkeit der Änderungen• keineChangelog
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.

KategorieVorherNachher
MobileLighthouse Mobil vorherLighthouse Mobil nachher
DesktopLighthouse Desktop vorherLighthouse Desktop nachher

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:

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:

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:

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.
GitLab-Mirror auf Firmeninstanz
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:
GitLab Deploy Stages

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: Version der Website
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.
GitLab Web-IDE

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:



Tags: homepage · website · codedoc · hosting · pwa · progressive-web-app · gitlab

Kontakt, Hilfe oder Seite editieren

Fragen hierzu werden dir in der Telegram-Gruppe oder in der VIP-Gruppe beantwortet. Den offiziellen Channel findest du unter t.me/tomriedl_news.

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).

Changelog

Neue Website - Warum und wieKurzzusammenfassungVorher - NachherDesignHostingCookies und AnalyticsWarum CodedocStatic WebsiteWarum Open-SourceDeployOnline-EditorWebsite lokal öffnenProgressive Web-AppMitgestaltung und FeedbackKontakt, Hilfe oder Seite editierenChangelog

Startseite Tags Abkürzungen/Definitionen VIP-Gruppe Telegram Über Tom Riedl



tomriedl.com - Version 2.18.1

Impressum Datenschutzerklärung Changelog