Die Geschichte der Mitgration der Webseite

Hallöchen liebe Leute,

seit dem 1.12.2019 ist die Webseite in einem neuen Zustand. Das dürfte euch allerdings aufgefallen sein. Bin jetzt zwar mit dem Post ein bisschen spät dran, aber besser spät denn nie! Daher auf in die Reise der Umstellung meiner Webseite!

Der Ursprungszustand

Die vorherige Webseite basierte auf WordPress. Allerdings war ich mit WordPress nicht mehr ganz so zufrieden. Doch warum war ich mit WordPress unzufrieden?

  • Einerseits ist die Webseite gefühlt ziemlich langsam geworden. Das lag aber hauptsächlich daran, dass ich einige Plugins am Laufen hatte und diese brauchen eben ein wenig Performance.
  • Andererseits passte WordPress nicht so ganz in meinen persönlichen Workflow.

Daher ein paar Worte zu meinem Workflow:

  1. Videos aufnehmen
  2. Videos schneiden
  3. Videos hochladen und sobald hochgeladen einen Post auf WordPress erstellen
  4. Thumbnails erstellen, Titel und Inhalt anpassen, sowohl auf Youtube als auch auf WordPress
  5. Tweet in Tweetdeck erstellen und planen

Für den dritten Schritt habe ich mir ein eigenes Bash-Script geschrieben. Mit diesem automatisiere ich einige Schritte:

  1. Basierend auf dem Dateinamen, werden Template-Informationen aus einer Textdatei extrahiert sowie die Folgennummer aus dem Dateinamen herausgezogen und anschließend in den Template-Text eingetragen und hochgeladen.
  2. Sobald Upload fertig, Post für WordPress erstellen (auch hier Werte aus der Textdatei extrahieren) und per E-Mail (einem alten Programm) versenden. Diese E-Mail wird anschließend von meinem WordPress verarbeitet.

Den zweiten Schritt wollte ich gerne austauschen. Gründe:

  • Veraltetes Mail-Programm für den Versand -> Sicherheitslücken
  • E-Mail -> auch generell nicht sicher, wenn jemand meine E-Mail-Adresse erfahren hätte, hätte neue Posts auf meinem WordPress erstellen können.

Die Suche

Deshalb machte ich mich auf die Suche nach einer geeigneten Alternative. Es sollte somit etwas sein, welches eine gute Schnittstelle zum automatisierten Erstellen von Posts bietet sowie schnell und einfach anpassbar sein. Außerdem sollte es Open-Source sein, sowie sollte es logischerweise die technische Voraussetzung erfüllen können (Apache / NGINX - also kein Node.js).

Anpassbar: Selber ein neues Design erstellen können, wobei das einfach sein sollte und nicht all zu komplex (Hallo WordPress! :D).
Schnell: Die Webseite sollte auch schnell laden können. Es soll schließlich für jeden Gast keine Qual sein, meine Webseite zu besuchen. Also das offensichtliche :D.

Was ist mir auf dem Wege begegnet:

  • Grav. Ein Content-Management-System (CMS) wie WordPress. Hier habe ich aber keine geeignete Anbindung zum automatisierten Erstellen von Posts gefunden. Theming sah ganz ok aus, aber naja PHP…
  • Ghost. Auch ein CMS, allerdings für Node.js, somit ungeeignet.
  • Static Site Generators wie Jekyll und Hugo. Dies sah schon deutlich besser aus. Aber was hier wieder tricky ist, ist die Bereitstellung von Seiten. Aber dennoch vielversprechende Kandidaten.

Die Lösung

Somit kam es zu einem kleinen Fight zwischen den beiden Static Site Generators (SSG) Jekyll und Hugo.
Beide verwenden für die Inhalterstellung Markdown, also ich werde zukünftig alle Posts in dem Texteditor meiner Wahl erstellen müssen (also Kate und VSCode). Beide haben eine ähnliche Syntax für die Erstellung von Posts. Aber der große Unterschied ist: Hugo basiert auf Go, und Jekyll auf Ruby. Hugo soll der schnellste SSG auf dem Markt sein. Dementsprechend entschied ich mich für Hugo.

Der große Vorteil an statischen Seiten ist:

  • Kein dynamischer Code, welcher Schäden anrichten kann.
  • Hacker können sich nicht reinhacken (zumindest nicht auf meinen Webserver).
  • Keine veralteten Anhängigkeiten des Webservers (bzw. egal). Da ich den Webserver nicht selber betreibe, sind die Hoster für das Aktualisieren der Software zuständig.

Wie stelle ich Daten bereit?

Wie mache ich es nun aber mit der Bereitstellung der Seiten? Ich könnte selbst die Posts jeden Tag um eine bestimmte Uhrzeit erstellen lassen und anschließend via FTP auf den Server schieben. Das wäre allerdings doof, da ich nicht die ganze Zeit am PC bin und dieser somit häufig zur Uhrzeit des Postings aus ist.
Da habe ich nun Gitlab gefunden. Es ist ein Werkzeug zur Versionsverwaltung von Quellcode, welches ich schon aus diversen Software-Projekten kenne. Ich kannte es bisher nur unter diesem Verwendungszweck, aber jedem Nutzer stehen auch noch 2000 Freiminuten im Monat für die Kontinuierliche Integration (englisch: continuous integration (CI)) zur Verfügung. Das wäre in meinem Falle die Erstellung von meiner Webseite und Übermittlung der statischen Seiten mittels sftp. Also an sich eine feine Sache!

Theme Entwicklung

Anschließend habe ich mich in die Doku von Hugo reingelesen, sodass ich mein individuelles Theme erstellen kann. Dieses basiert auf nun auf dem CSS-Framework UIKit. Da ich meine privaten Software-Projekte auch sehr gerne mit UIKit erstellt habe, wollte ich nun meine Noxigat-Seite auch auf UIKit umstellen. Es soll dabei dennoch einen ähnlichen Stil wie die alte Webseite besitzen. Dementsprechend saß ich knapp eine Woche an der Erstellung des Themes dran. Wenn paar Kleinigkeiten nicht passen, werden diese auch noch weiterhin gefixt, aber bis jetzt schaut alles recht gut aus und bin damit sehr zufrieden. Kürzlich erst habe ich eine Suche mit eingebaut, welche bei euch im Browser läuft. Diese wird Daten aus einer JSON-Datei gespeist, welche mit Hilfe von Hugo erstellt wird.

Integration alter Inhalte

Doch die Migration ist hier noch nicht zu Ende. Wie bekomme ich die alten Inhalte herein? Das war nicht so einfach. Da mein Design bestimmte Schlagwörter besitzt, welche im Design verankert sind, kann ich keine Standardlösung verwenden, wie das Jekyll-Exporter-Plugin für WordPress. Somit musste ich auch hier wieder selber ran.

Die Youtube-API ist ja glücklicherweise sehr informativ und somit habe ich mir innerhalb von zwei Tagen ein Java-Programm geschrieben, welches die Meta-Daten meiner Youtube-Videos ausliest und Posts dazu erstellt sowie die Thumbnails runterlädt.

Mit diesen Daten konnte ich nun die neue Webseite ausgiebig testen und Schwachstellen finden. Da habe ich so einiges gefunden. Eine Woche weitere Testphase und alles sah aus und lief wie gewünscht. Anschließend zwei Wochen Parallelbetrieb unter einer anderen Domain auf meinem Webserver. Es funktionierte nahe zu alles, wie ich geplant und entwickelte hatte.
Aus diesem Migrationsprojekt habe ich eine ganze Menge mitgenommen und war Stolz wie Oskar für meine eigene Leistung.

Aktueller Zustand

Doch wie erstelle ich nun meine neuen Posts?
Erinnert ihr euch noch an das Bash-Script was ich oben erwähnt habe? Ich habe es dahingehend modifiziert, dass es nun einen Post generiert anstatt einer E-Mail. Diese Posts werden dann auf in meine Gitlab Git-Instanz geschoben, sobald ich Posts bearbeitet habe, oder etwas an der Webseite modifiziert habe. Ansonsten wenn es Posts sind, die nichts mit meinen Youtube-Videos zu tun haben, erstelle ich diese “per Hand” und schreibe einfach in Markdown runter. (Eine sehr schöne Syntax btw. - nicht unbedingt für wissenschaftliche Texte , hier eher LaTeX, aber dennoch ganz cool)

Außerdem muss ich mittlerweile meine Posts nicht mehr selber in Tweetdeck eintragen, sondern ich speichere den Inhalt meiner Tweets in den Posts direkt ab und Hugo erstellt einen RSS-Feed für mich, welche ich in IFTTT eingebunden habe und mittels Buffer.com posten lasse. Damit spare ich mir auch noch die geplanten Tweets. Wenn etwas “außerplanmäßig” getweetet werden soll, erstelle auch hier den Tweet per Hand in Tweetdeck.

Fazit

Soo ich hoffe euch hat es gefallen, und auch etwas über dem Background dieser Seite erfahren. Wenn ihr ein paar Begriffe nicht versteht, einfach mal in die Suchmaschine eures Vertrauens eingeben und nachschauen.

So ein Migrationsprojekt von WordPress auf Hugo ist keine schwere Sache (sofern man sich mit den Techniken und Programmierung auskennt). Wer ein “Standard-Nutzer” ist, wird auch jede Menge Themes für Hugo vorfinden und braucht auch nicht die ganzen speziellen Implementierungen, wie in meinem Falle. Vier Wochen Arbeit und diverse Tools später läuft nun die Webseite wie gewünscht und optimiere weiter stetig. Also man braucht keine Angst vor einer Weg-Migration von WordPress haben!

Eurer Chris


Magst du Renn- und Wirtschaftssimulationen? Dann bist du hier genau richtig, denn bei mir findest du Videos zu Project Cars, Assetto Corsa und Konsorten. Aber auch Wirtschaftssimulationen wie Zoo Tycoon oder Another Brick in the Mall.