Boehrsi.de - IT und Gaming Blog

Boehrsi.de Version 8 - Hugo Static Site Generator

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de Version 8 - Hugo Static Site Generator Bild

Hugo ist zum einen ein Getränk und zum anderen aber auch ein verdammt guter Open-Source Static-Site-Generator. Für mich wurde er vor allem interessant da es keine Abhängigkeiten gibt, welche über Paketmanager oder manuell geladen werden müssen. Denn ich möchte mich auf die Entwicklung konzentrieren und nicht darauf den Build-Prozess mal wieder zu reparieren.
Wie ich Hugo initial gefunden habe weiß ich gar nicht mehr, aber ich war von Anfang an durchaus interessiert, als ich vor knapp zwei Jahren das praktische Tool entdeckte. Doch durch den durchaus großen Aufwand einen kompletten HTML / CSS / PHP / MySQL Stack wegzuwerfen und von Grund auf in einer unbekannten Technik neu zu schreiben, dauerte es noch etwas bis zur eigentlichen Umsetzung.

Diese ist nun erledigt, basiert auf Hugo - was übrigens in Go open_in_new geschrieben ist - und läuft hervorragend. Ich bin definitiv noch kein Profi, aber es funktioniert alles und ich kann meine Ziele umsetzen. Das nächste Ziel wird die Optimierung sein, denn auch wenn ich viele Seiten erstelle, so sind die Build-Zeiten durch einige meiner Konstrukte auf fast zwei Minuten angewachsen. Im Normalfall sind dies übrigens nur wenige Sekunden.
Hugo selbst bietet beliebig viele unterschiedliche Content-Typen, Content-Gruppen, Menüs und vieles mehr. Nichts im limitiert und quasi alles kann beliebig angepasst werden. Ein Beispiel ist hier der Typ Blog, welcher relativ normal sein dürfte. Ich habe allerdings noch meine Sammlungen, welche ich in Form einer Content-Gruppe bzw. Taxonomy im Hugo Kontext umgesetzt habe. Ähnlich sieht es mit den Projekten und den dortigen Bereichen aus.
All dies baut man mittels der Hugos Templating Engine zusammen. Im Prinzip ist es ähnlich dem Erstellen einer PHP Seite, denn auch dort nutzt man HTML und fügt dynamische Logik und Variablen ein. Nur wird eine mit Hugo erstellte Seite nicht bei jedem Aufruf neu gebaut, sondern im Moment des Build-Prozesses. Danach wird die fertige Seite hochgeladen und somit ist das eigentlich laden für den Nutzer wesentlich schneller. Dafür verzichtet man natürlich auf dynamische Funktionen zur Laufzeit.
Um nicht alles selbst schreiben zu müssen bringt Hugo diverse vordefinierte Funktionen und Variablen mit sich. Letzte haben verschiedene Kontexte, so gibt es Variablen die auf der gesamten Seite gelten, während andere auf Unterseiten oder nur in bestimmten Bereich verfügbar sind. Hat man dieses System erst einmal durchdrungen kommt man meist schnell an benötigte Informationen.
Damit alles noch besser optimiert ist bieten neuere Hugo-Versionen Pipes an. Diese Funktion muss ich noch in meine Entwicklung einbauen, denn sie erlaubt es z.B. CSS oder JS Dateien zu verkleinern. Auch Bilder können so optimiert werden. Es ist übrigens weiterhin nur Hugo selbst als Tool nötig, keine zusätzlichen Plugins oder ähnliches. Hugo selbst ist übrigens extrem einfach auf der Kommandozeile open_in_new zu bedienen. Ich nutze es mit nur zwei verschiedenen Parametern, einmal für das lokale Testen und einmal für den Build / Deploy Schritt, wobei letzteres eigentlich automatisiert auf meinem Server passiert.
Sollte es euch zu viel Arbeit sein ein komplettes Theme selbst zu erstellen, gibt es auch die Möglichkeit eines von diversen fertigen open_in_new und extrem guten Themes zu nutzen. Diese sind unter verschiedenen Lizenzen verfügbar und können entsprechend auch teilweise angepasst und erweitert werden.
Sobald das Theme in irgendeiner Art und Weise steht geht es an den Content. Diesen zu erstellen ist denkbar einfach, denn jeder Beitrag liegt normalerweise in einer eigenen Datei. Diese bekommt Markdown open_in_new als Input und baut daraus dann schön formatierten HTML-Output. Falls HTML übrigens nicht ganz das ist was ihr benötigt, auch alternative Ausgabetypen, wie z.B. RSS oder JSON sind möglich. Für mich war es eine große Umstellung, einiges an Aufwand und trotzdem hat es sich gelohnt. Die eigentliche Nutzung ist einfacher (Atom open_in_new für die Entwicklung und Content Erstellung), die Seite lädt schneller, die Verwaltung der Daten und Backups erfolgt einfach via GIT und diverse weitere Kleinigkeiten sorgen im Alltag für Bestätigung, dass die Umstellung eine gute Idee war. Falls ihr Fragen zu Hugo habt meldet euch, ich werde aber auch sicherlich noch das eine oder andere Wort zu diesem praktischen Tool verlieren.

Related Links
Kommentare  
Kommentar erstellen
Mit dem Abschicken des Kommentars erklären sie sich mit der in der Datenschutzerklärung dargelegten Datenerhebung für Kommentare einverstanden. Spam, unangebrachte Werbung und andere unerwünschte Inhalte werden entfernt. Das Abonnieren via E-Mail ist nur für E-Mail Adressen erlaubt die Sie rechtmäßig administrieren. Widerrechtliche Abonnements werden entfernt.