Im Studium hatte ich ein Seminar zur Webentwicklung – da haben wir einfache Websites in reinem HTML-Text mit etwas CSS drum herum geschrieben. Alternativ dazu wurde uns da noch die Benutzung des CMS (Content-Management-Systems) WordPress erklärt.
Im Zuge meiner Ausbildung bei der NETWAYS Professional Services durfte ich mich nun mit dem Static Site Generator Hugo auseinandersetzen. Ein Static Site Generator ist im Prinzip ein Tool das auf Basis von Rohdaten und Templates eine ganze statische HTML-Seite generieren kann. Im Falle von Hugo entscheidet man sich am Anfang der Seite für ein Theme. Je nachdem was herauskommen soll bieten sich verschiedene Themes an – so gibt es beispielsweise für Präsentationen und zum Schreiben von Dokumentationen spezielle Themes. Besonders zum Schreiben von Blogs existieren sehr viele (fast 300) Themes.
Es empfiehlt sich die Website lokal auf dem Client mit einer Hugo-Installation zu erzeugen und diese anschließend auf einen Webserver zu übertragen. Alternativ dazu bietet Hugo auch einen integrierten Webserver, der sich unter anderem mit einem LiveReload-Feature besonders gut zum Entwickeln der Seite eignet. Der Inhalt der Website wird bei Hugo grundsätzlich in Markdown-Dateien geschrieben, falls zusätzliche Formatierungen gewünscht sind kann auch HTML & ggf. auch JavaScript-Code integriert werden. Anstatt Inline-HTML-Code zu nutzen ist auch das Abrufen von Shortcodes möglich. Shortcodes sind im Prinzip kleine Codeschnipsel die eingebaute oder benutzerdefinierte Templates abrufen. Davon sind einige bereits von vornherein integriert, etwa zum simplen Einbetten von Videos auf bekannten Plattformen. Natürlich können Shortcodes in Hugo auch selbst angelegt werden. Hier mal exemplarisch ein Shortcode in der Datei ‘toc.html’:
{{ .Page.TableOfContents }}
Dies würde das vordefinierte TableOfContents-Template abrufen, welches auf Basis von Markdown-Überschriften dann ein Inhaltsverzeichnis generiert. Außerdem können in einem bestimmten Ordner auch Daten in den Formaten JSON, TOML und YAML abgelegt werden und in Hugo wieder eingelesen werden. Auch hier ein Beispiel, diesmal Produktdaten in einer YAML-Datei:
responsible: "Bjoern Berg" product: "Gohugo" id: [12345]
Falls gleich mehrere Leute (auch gleichzeitig) an einer Hugo-Website bauen sollen kann die Hugo-Seite auch als Git-Repository umgesetzt werden, so dass alle Personen Zugriff auf die Rohdaten der Website haben. Da es auf Websiten oft einige gleichartige Arten von Beiträgen gibt, können dafür Archetypen erstellt werden. Diese beinhalten dann bspw. bereits ein Grundgerüst für einen solchen Artikel wie Überschriften, Unterüberschriften, Tabellen und Metadaten. Per default erzeugt Hugo die URL-Struktur aus der Ordnerstruktur in den Rohdaten (die sich wiederum aus den vorher erwähnten Archetypen erzeugt). Alternativ dazu kann die URL-Struktur auch selbst spezifiziert werden (was dann für einen ganzen Archetyp gilt). Damit ist z.B. eine Terminologie a la example.com/2021/11/hugo-static-site-generator/ möglich. Dies wird dann im Buildprozess der Website umgesetzt (was bei Nutzung des in Hugo integrierten Webservers direkt nach Speichern der Markdowndatei geschieht). Ebenso im Buildprozess kann Hugo Bilder umformen – dabei ist das unter anderem das Konvertieren zwischen verschiedenen Dateiformaten, Bildgrößen und die Rotation des Bildes möglich.
Mein Eindruck von Hugo ist, dass es damit sehr einfach ist, eine schöne Website zu erstellen und diese auch effizient mit Daten zu befüllen. Durch die große Auswahl an Themes gehen auch viele verschiedene Websites und Designs. Wenn Du auch so tolle Projekte in Deiner Ausbildung zum Fachinformatiker machen möchtest, kannst du Dich gerne für einen Ausbildungsbeginn im Herbst 2022 bewerben!
0 Comments