Boehrsi.de - IT und Gaming Blog

Meine Statusseite - Entwickelt mit Hugo

Erstellt am event Uhr von account_circle Boehrsi in label Development
Meine Statusseite - Entwickelt mit Hugo Bild

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.

What is GitHub Pages?
via Youtube ansehen
Mit dem Abspielen des eingebundenen Videos akzeptieren Sie die Datenschutzbestimmungen von Youtube open_in_new.

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.

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.