Neue Webseite ist online

Öfter mal was neues

Es ist mitunter schon komisch, dass man innerhalb kurzer Zeit durch verschiedene Seiten auf dasselbe Thema stößt. Beim Hören meines Lieblingspodcasts “Engineering Kiosk” (https://engineeringkiosk.dev) bin ich über “GoHugo”, oder einfach “Hugo” gestolpert: Die Website vom Engineering Kiosk wurde mit Hugo erstellt.

Hugo ist ein sogenannter Static-Site-Generator, also ein Werkzeug, das verwendet wird, um Webseiten aus statischen Dateien zu erstellen. Hugo ist bekannt für seine Schnelligkeit, Einfachheit, Flexibilität, Sicherheut und Portabilität.

Ich war zu dem Zeitpunkt sowieso am Überlegen, wie ich denn meine Webseite neu erstellen sollte. Bei der Lektüre des Buches “Learning Blazor” von David Pine (https://davidpine.net) bzw. beim Durchforsten dessen Github-Profils (https://github.com/IEvangelist/) bin ich nochmal auf Hugo gestoßen: David hat seine Webseite ebenfalls mit Hugo erstellt.

Die Kombination aus “ich will meine Webseite neu machen, aber mit welchem Tool” und “ach, das hört sich ja interessant an” hatte dann die Auswirkung, dass diese Webseite nun mit Hugo umgesetzt ist.

Und warum Hugo?

Hugo ist eine einfache Art, statische Webseiten zu erstellen. Es gibt zahlreiche Themes, die man einfach verwenden und mit Inhalt befüllen kann. Hugo ist schnell, ja vielleicht sogar der schnellste Static-Site-Generator. Hugo ist einfach und flexibel, da es eine einfache Verzeichnisstruktur und Templates hat und außerdem viele Plugins verfügbar sind. Hugo ist sicher, da statisch Webseiten weit weniger Angriffspotenzial bieten als dynamische CMS mit Datenbanken und serverseitigen Skripten. Und da Hugo keine externe Datenbank benötigt, kann man die Webseiten einfach von A nach B portieren.

Dass man Inhalte in Markdown https://www.markdownguide.org verfassen kann und sich somit alles in Textdateien abspielt finde ich sehr gut und von daher wollte ich wissen wie das geht.

Ein Hinweis noch zum Hintergrund: Hugo ist in Go geschrieben, einer von Google entwickelten Programmiersprache.

Und wie ist der Ablauf?

Zunächst muss Hugo installiert werden. Das geht je nach Betriebssystem auf unterschiedliche Arten: https://gohugo.io/installation/

Nach der Installation gibt es das Kommandozeilenprogram hugo, mit dem der Generator gesteuert werden kann. Kurzum sind folgende Schritte notwendig:

  1. Neue Seite generieren: hugo new site mynewsite
  2. Ein Theme auswählen und installieren
  3. Inhalte erstellen hugo new content pfad/zum/inhalt.md
  4. Inhalte prüfen hugo server
  5. Website erstellen und veröffentlichen hugo

Geht das auch etwas genauer?

Nach den ersten Gehversuchen mit einem fertigen Theme wollte ich dann doch etwas mehr: Mein eigenes Theme auf Basis Bootstrap https://getbootstrap.com/. Wie man im vorigen Abschnitt gesehen hat, gibt es für das Erstellen der Seite und der Inhalte einen Befehhl in der Kommandozeile: hugo new .... Neben site und content gibt es die Option theme. Mit dieser wird der Rahmen eines neuen Themes erstellt - samt Beispielinhalten.

Nach dem Erstellen des Thems wurde ich an meine Zeit als Entwickler und Projektleiter von diversen Projekten mit Einsatz eines Content-Management-System (CMS) zurück erinnert, denn die Aufgaben nach Installation der sogenannten Templates unterscheidet sich bei Hugo und CMS nicht sehr.

Unterschiedliche “Content-Typen”

Wichtig ist in erster Linie der Ordner layouts innerhalb des neu erstellten Themes. Im Ordner layouts/_default gibt es vier Dateien:

baseof.html
home.html
list.html
single.html

baseof.html enthält das Rahmentemplate und fügt innerhalb der HTML-Struktur einer Webseite verschiedene Partials ein: Code-Fragmente, die an einer Stelle definiert sind und wiederverwendet werden können.

home.html enthält das Layout für die Startseite - die Homepage. Hier ergänzen sich baseof.html und home.html, denn in baseof.html wird ein {{ block "main" . }}{{ end }} definiert; der Inhalt von home.html wird von einem {{ define "main" }} … {{ end }} umschlossen. Das bedeutet, dass innerhalb des Rahmentemplates Inhalte eingefügt werden, die in anderen Templates innerhalb eines “main” Blocks definiert sind.

list.html und single.html beziehen sich auf Seiten, die andere Seiten innerhalb einer Liste darstellen bzw. einen einzelnen Eintrag eines solchen Listenelements rendern. Das Standardaussehen im Ordner _default kann innerhalb des Verzeichnisses layouts überschrieben werden - je nachdem, wie die Inhalte aussehen sollen.

Template-Sprache

GoHugo verwendet eine Go-Template-Sprache, die speziell für Hugo und andere Anwendungen in der Go-Sprache entwickelt wurde. Hugo-Templates enthalten im wesentlichen folgende Bestandteile:

  1. Variablen
{{ $title:= "Meine Website" }}
<title>{{ $title }}</title>
  1. Kontrollstrukturen
{{ if eq .Title "Startseite" }}
    <h1>Willkommen auf der Startseite</h1>
{{ else }}
    <h1>{{ .Title }}</h1>
{{ end }}
  1. Schleifen mit range
<ul>
{{ range .Site.Pages }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
  1. Funktionen und Pipelines
<p>{{ .Content | safeHTML }}</p>

Alles in allem alte Bekannte, um einzelne Inhalte auf einzelnen Seiten oder Listen auszugeben, diese bei Bedarf zu Formatieren und so eine Webseite aus mehreren Inhaltsblöcken zusammenzusetzen.

Konfiguration

Es gibt mehrere Konfigurationsdateien, die verwendet werden können.

  1. config.toml Dies ist die Hauptkonfigurationsdatei für eine Hugo-Website. Sie liegt im Hauptverzeichnis und enhält z. B. Title, Baseurl und das verwendete Theme.
  2. archetypes/default.md Dies ist eine Vorlagen-Datei, die als Basis für neue Inhaltsseiten verwendet wird. Sie enthält das Standard-Frontmatter und den Inhalt, der für neue Inhaltsseiten generiert wird.
  3. theme/<theme-name>/config.toml Enthält spezielle Einstellungen zum Theme.
  4. environments Hugo unterstützt auch Umgebungsvariablen für die Konfiguration. Somit können verschiedene Umgebungen verwaltet werden, wie z. B. Entwicklung, Produktion oder andere.
  5. data Im Verzeichnis Data können Dateien abgelegt werden, die strukturierte Daten in Form von YAML-, TOML- oder JSON-Dateien enthalten. Diese Daten können dann in Templates abgerufen und angezeigt werden.

Inhalte

Nach dem Erstellen einer Hugo site gibt es den Ordner content. Dort werden die Inhalte abgelegt. Jedes Unterverzeichnis von content repräsentiert eine Kategorie oder Unterseite. Innerhalb dieser Verzeichnisse werden Inhalte als Markdown-Dateien (.md) abgelegt. Die Dateinamen und Strukturen bilden die URLs der generierten Webseiten ab.

Am Beginn einer Markdown-Datei steht ein Bereich zwischen --- Zeichenketten. Dieser Bereich wird Front Matter genannt und enthält Metadatan wie Titel, Datum und den Entwurfstatues eines Beitrags.

Fazit

Das war ein kleiner Exkurs in die Welt von Hugo. Alles in allem eine sehr gute Möglichkeit, einfache Websites zu bauen, die nicht täglich geändert werden und ansonsten auf dynamische Inhalte verzichten können.

Zurück
2024-03-23 00:23