Matthias.live facelift

May 21, 2020

Als ich vor etwas über einem Jahr meine Website eingerichtet habe, hatte ich davor noch keine klaren Vorstellungen davon, wie die technische Umsetzung dieser aussehen sollte. Nach kurzen Recherchen habe ich mich dazu entschlossen, mir vorerst GitHub Pages zu Nutze zu machen. In Kombination mit Jekyll und forestry.io konnte man damit schon einen kleinen Blog betreiben. forestry.io stellt hierbei eine schönes Interface zur Verfügung, mit dem man sehr einfach die Markdown-Dateien im GitHub Repository ändern, erstellen und löschen kann. Jekyll macht daraus dann statische HTML-Dateien. Es handelt sich dabei um eine sehr einfach und unkomplizierte Lösung: forestry.io managed die Markdown-Files und Jekyll baut daraus die Website. Wie so oft im Leben hat diese Vorgehensweise Vorteile und Nachteile. Einerseits kann man so relativ schnell eine funktionierende Website mit Blog einrichten, andererseits lässt die Performance dieses Konstrukts noch reichlich Luft nach oben, da es sich um statische Seiten handeln und beim Wechsel zwischen diesen die komplette Seite neu geladen werden muss.

Irgendwann erfuhr ich von fancy Frameworks wie React oder Vue. Die Idee hinter diesen Tools ist folgende: Die komplette Website (inklusive aller Blogposts und allem was dazugehört) besteht technisch gesehen nur noch aus einer einzigen Seite, jedoch werden immer nur jene Elemente geladen, die auch benötigt werden. Auch bei einem Wechsel zwischen den "virtuellen" Seiten wird nicht die komplette Seite neu geladen sondern nur das was eben neu geladen werden muss. Das wirkt sich logischerweise positiv auf die Performance aus. Diese Idee war mir direkt sympathisch, weshalb ich anfing, mich mit React zu befassen. Da war definitiv etwas Eingewöhnung notwendig, doch die Ergebnisse waren durchaus zufriedenstellend. Es entstand so wenig später die WebApp "Laketheory", die auf React basiert und Daten benutzt, die von einem Python-Backend im JSON-Format zur Verfügung gestellt werden.

Für die aktuelle Version von matthias.live habe ich dann aber nicht React, sondern Vue verwendet. Die Erstellung des Frontends mit Vue gestaltete sich als sehr einfach. Als nächstes musste ich mich mit der Frage befassen, wie ich das Backend realisieren würde. Forestry.io konnte ich hier nicht mehr verwenden, da es nur mit GitHub Pages bzw. Jekyll zusammenarbeitet. Nach einigen Recherchen kam ich auf Strapi, ein sogenanntes "Headless CMS". Strapi stellt hierbei eine Oberfläche zur Verfügung, um Inhalte aller Art zu erstellen und zu bearbeiten. Diese können dann über ein API abgefragt werden. Das Frontend fragt also bei jedem Laden einer "virtuellen" Seite die entsprechenden Daten vom Backend ab. Bei diesem Datenaustausch kommt noch GraphQL zum Einsatz, das die Abfrage von Daten allgemein etwas erleichtert.

Kurz zusammenfassen kann man die Evolution meiner Website also wie folgt: Füher wurden die Inhalte mit forestry.io erstellt und Jekyll hat diese in HTML-Files verwandelt. Fertig. Mit dieser neuen Version funktioniert das ganze etwas anders: Die Inhalte werden mit Strapi erstellt, das diese in einer Datenbank ablegt. (in meinem Fall MongoDB) Wird nun die Website aufgerufen werden dank Vue immer nur die benötigten Inhalte gerendert und bei Bedarf Daten vom Backend abgefragt. Dafür wird eine GraphQL-Query an das Backend (Strapi) gesendet. Dieses lädt die gewünschten Inhalte aus der Datenbank (MongoDB) und sendet sie an das Frontend. Dieser Aufbau bietet im Allgemeinen eine bessere Performance. Da ich erst seit Kurzem die Website auf dieses Art betreibe, kann es noch vereinzelt zu Fehlern auf der Website kommen, diese werden aber bald behoben.