post

Migration zur statischen Webseite mit Hugo

Jun 26, 2016

Jahre lang hat mir WordPress mehr oder weniger gute Dienste geleistet. Zum einstieg in die Arbeit mit Webseiten hat es mir viele Funktionen mit wenig wissen geboten. Mit den Jahren habe ich mich weiter Entwickelt und dazu gelernt. Durch die Arbeit an verschiedenen Projekten habe ich immer stärker gemerkt das es notwendig ist sich stark Systeme mit vielen Plugins zu kümmern. Mit dem steigenden Wissen hatte ich die Möglichkeit kleinere Plugins durch eigene Lösungen zu ersetzen. Da jedoch auch die Zeit immer knapper wird wollte ich dafür sorgen das ein Verwaltungsaufwand weniger existiert. Und was liegt da näher das eine Projekt, meinen Privaten, nicht sehr frequentierten Blog von WordPress los zu sagen und auf eine statische Webseite zu migrieren.

Wieso Hugo

In letzter Zeit habe ich vieles über verschiedene statische Webseitengeneratoren gehört und mein Interesse war geweckt. Die Systeme Middleman und Jekyll haben sich jedoch wegen ihrer vielen Abhängigkeiten direkt selbst disqualifiziert. Als ich dann anfing mit Go (golang) zu experimentieren habe ich mich umgeschaut welche Projekte damit umgesetzt wurden und bin auf Hugo gestoßen. Ein kleines Programm zum generieren von statischen Webseiten. Hugo ist leichtgewichtig und lässt sich auf Windows, Mac und Linux betreiben und bietet einige nette Gimmiks wie z.B. einen eingebauten Server mit watch Deamon zum Testen auf dem Heimischen PC. Noch dazu bringt es alles mit um auf dem System zu laufen und benötigt keine weiteren Abhängigkeiten, genau das was ich von einem wartungsarmen System erwarte.

Design

Nun habe ich ein wenig damit experimentiert und gemerkt das mir Hugo sehr gut gefällt und beschlossen meine Webseite mit Hilfe von Hugo zu erstellen. Für Hugo gibt es eine stetig wachsende Auswahl an fertigen Designs, von OnePager über Blogs bis hin zu Dokumentationen oder Firmenauftritte. Da ich jedoch etwas mehr über das System erfahren wollte habe ich mich auch gleich daran gesetzt ein eigenes Design zu erstellen. Die Template Sprache ist mit ein wenig Übung nicht sonderlich schwer und bietet viele Möglichkeiten. Dynamische Inhalte können mit Javascript realisiert werden.

Migration von WordPress zu Hugo

Die Migration gestaltete sich leider etwas schwieriger als gehofft. Wer einen Blog mit vielen Artikeln pflegt wird einiges an Arbeit investieren müssen um diesen einwandfrei zu migrieren. Es gibt ein Plugin zum Export der Artikel zu Hugo welches die Artikel in Markdown exportiert. Wer jedoch verschiedene Plugins zur Formatierung verwendet der muss viele der Artikel per Hand Nachbearbeiten. Zum Beispiel wurden Code Beispiele oder YouTube Videos nicht richtig erkannt und eingebunden. Auch Bilder und co. müssen überarbeitet werden. Ist die Arbeit jedoch getan, dann bekommt man dank Hugo eine statische Webseite die mit Features wie Code Highlighting aufwartet und dafür einen wesentlich geringeren Pflegeaufwand benötigt.

Verwaltung mit Hilfe von Git

In vielen meiner Projekte arbeite ich mit Git und liebe es. Da Hugo rein auf Textdateien Basiert bietet es sich gerade zu an Git zur Verwaltung ein zu setzen. Auf meinem Computer befindet sich eine exakte Kopie der Webseite somit kann ich problemlos offline Artikel verfassen, mir eine Vorschau anzeigen lassen und zum ende das ganze veröffentlichen. Mit Hilfe von git push wird das Repository auf dem Server aktualisiert und durch Hugo automatisch die neuen Seiten erstellt. (Artikel hierzu folgt)

Durch einen gleichzeitigen Upload zu Github habe ich meine Webseite an drei verschiedenen Orten abgelegt und brauche mich nicht noch zusätzlich um Backups zu kümmern.

Markdown zum Ablenkungsferien schreiben

Einen weiteren Vorteil den ich persönlich in den statischen Webseiten Generatoren gesehen habe ist das verfassen der Webseiten mit dem Editor der Wahl in Markdown. Markdown als Auszeichnungssprache ist sehr einfach zu erlernen und bietet die Anwendung nicht nur für Statische Webseiten sondern auch für Wikis oder E-Mails lässt es sich sehr geschickt einsetzen. Ein weiterer Vorteil von Markdown ist, das man die Wahl hat mit welchem Editor man die Texte verfassen möchte. Es gibt Onlinetools wie dillinger.io welche das Markdown direkt rendern und darstellen, es genügt jedoch auch ein einfacher Texteditor auf der Kommandozeile. Für mich hat es den Vorteil das ich weniger Abgelenkt werde von der Formatierung. Es ist sehr angenehm sich nicht mit einem Wisywig Editor und seinen Eigenheiten Auseinander setzen zu müssen. Ich hoffe dies führt dazu das ich wesentlich häufiger in meinen Blog schreiben werde.


Kreativmonkey