Meine Statusseite - Entwickelt mit Hugo
Ich habe in den letzten Monaten häufiger mit Bulma im Kontext der Webentwicklung gearbeitet und das Open-Source-CSS-Framework zusammen mit Hugo, dem Static Site Generator meiner Wahl, genutzt. Resultat ist unter anderem meine Status Website open_in_new. Dieses kleine Projekt hat aber noch ein paar mehr Eigenheiten, denn abseits der eigentlichen Entwicklung nutzte ich bei diesem Projekt das erste Mal umfangreicher GitHub Actions fürs Deployment und GitHub Pages open_in_new fürs Hosting.
via Youtube ansehen
Hugo und Bulma habe ich schon häufiger erwähnt, trotzdem möchte ich mit diesen beiden beginnen. Denn was ist ein Deployment oder Hosting ohne Inhalt. Hugo bietet euch die Möglichkeit mit wenigen Schritten (Quick Start Guide open_in_new) eine statische Website zu erstellen.
Im Folgenden erstellt ihr Templates open_in_new, welche dann durch Content open_in_new zum Leben erweckt werden. Das Wiring basiert dabei auf einer durchaus komplexen aber logischen Lookup Logik open_in_new. Ihr erhaltet so eine Reihe von HTML Dateien, welche mittels Go’s open_in_new html/template und text/template Packages erweitert werden. Die Template-Sprache ist nicht sonderlich kompliziert, bietet euch verschiedene Logikelemente (z.B. Bedingungen, Schleifen und weitere Abfragen) und nimmt euch an vielen Stellen an die Hand. Allerdings ist zu erwähnen, dass die Interna von Hugo und der Template-Sprache initial erst einmal verstanden werden wollen. Es lohnt sich also Themen wie die erwähnte Lookup Logik oder die verschiedenen Scopes von Variablen open_in_new näher zu betrachten.
Sobald die Templates stehen geht es dankbar weiter, denn Hugos Content wird via Markdown open_in_new Dateien verwaltet. Ihr erstellt einfach besagte Dateien, packt alle relevanten Informationen hinein und legt sie in die passenden Ordner. Alternativ könnt ihr globale Daten übrigens auch in Form von Data Files open_in_new ablegen, welche z.B. als JSON oder TOML Datei gespeichert werden. Ich habe dies z.B. mit den immer sichtbaren globalen Status Informationen getan, während einzelne Events als Markdown Dateien vorhanden sind.
Meine Template Dateien findet ihr übrigens hier open_in_new und meine Daten gibt es hier (Content) open_in_new und hier (Data) open_in_new. Sind eure Templates und Daten vorhanden, könnt ihr mittels hugo server eine Live-Vorschau bekommen und mittels hugo das eigentliche Deployment auslösen. Falls ihr übrigens keine Lust auf Bulma habt, bzw. gar nicht selber aktiv werden wollt im Kontext der Theme Erstellung, es gibt diverse fertige Themes für Hugo open_in_new.
Dieser kleine Überblick zum Thema Hugo soll euch eine Idee meines Konzepts geben und keinen vollen Einstieg in den Static Site Generator, denn selbigen gibt es ohnehin in besser auf der offiziellen Seite. Nachdem nun der Anfang gemacht ist, geht es bald weiter mit einigen Worten zur Nutzung von Bulma im produktiv Kontext.