Auf meinem alten Webserver wurde vom Betreiber die PHP Version erhöht und die Webseite unter philipptschardt.net funktionierte nicht mehr richtig, da die API zum Datenbankzugriff nicht mehr erlaubt war.

Deshlab enschied ich mich meine Webseite neu aufzusetzen und so robust wie möglich zu gestalten. Das heißt sie soll so wenig wie möglich von anderen Systemen, Frameworks oder Versionen von Programmiersprachen abhänig sein. Da ich auch keine dynamischen Inhalte habe, konnte ich mich von der Datenbank trennen und die komplette Webseite statisch bauen.

Die Liste an Features, die ich unterstützen wollte ist folgende:

• Neues, responsives Design
• Light/Dark Theme (CSS Custom Properties)
• Hohe Performance (statische Webseite)
• Mehrsprachig (Deutsch, Englisch)
• Progressive Web App Features: Installierbar, Offline, Caching
• Open Source

Das neue Design ist an dem alten angelehnt, wurde jedoch modernisiert und funktioniert jetzt auch responsiv. Zudem kann man zwischen hellem und dunkelem Theme hin und her schalten. Beim Öffnen der Seite wird zudem die vom Nutzer gewählte Eistellung im Betriebssystem übernommen. Die Erkennung erfolgt dabei über matchMedia("(prefers-color-scheme: dark)") und kann genauer im Repository eingesehen werden. Der Wechsel von hell zu dunkel wird durch eine CSS Klasse auf dem Document gehändelt, der die Farben in den CSS Custom Properties austauscht.

Um die Webseite statisch zu bauen nutze ich 11ty, der verspricht ein einfacher statischer Site Generator zu sein. Und tatsächlich bin ich von der Einfachheit positiv überrascht. Daten können leicht im JSON-Format gespeichert und genutzt werden. Die Beiträge sind in Markdown geschrieben und die Templates in Nunjucks. Die Beiträge werden zudem in Englisch und in Deutsch in dem betreffenden Unterordner ('de' oder 'en') angelegt und später unter dem Unterverzeichnis ausgeliefert. Dazu müssen Weiterleitungsregeln über die .htaccess Datei des Apache Server eingestellt werden. Der Server erkennt über den http-header die aktuell eingestellte Sprache und liefert entweder Deutsch oder Englisch (default) aus.

Zum Schluss wurde noch ein Manifest sowie ein Service Worker hinzugefügt, sodass man die Seite auch als PWA installieren kann. Zur Generierung des Service Workers, vor allem zur bequemen Auswahl welche Daten geprecached werden sollen, nutze ich Workbox. Dies ist eine die Service Woker Libary von Google und zudem die einzige Abhänigkeit in der gebauten Webseite.

Diese Einfachheit und Unabhänigkeit spiegelt sich auch im Lighthouse Testbericht wieder: