Webseiten mit Hugo

Freitag, 13. Juni 2025 — letzte Aktualisierung am Donnerstag, 3. Juli 2025

215 Wörter, Lesezeit: 2 min

Meine alte Webseite basierte auf dem PHP Yii Framework. Ich nutze Yii weiterhin z. B. beruflich, aber für diese kleine Webseite ist das einfach zu viel Overhead. Ich war daher auf der Suche nach einem einfachen Webseiten-Generator und habe mich für das Hugo Framework entschieden 😊. Hugo ist ein statischer Webseiten-Generator, d. h. am Ende wird das zu einem public-Ordner kompiliert, den ich einfach auf meinen Webserver hochladen kann — fertig 😊. Bisher bin ich sehr zufrieden.

Custom Theme

Es gibt hunderte Hugo Themes, mit denen die Webseite an die eigenen Bedürfnisse angepasst werden kann. Ich habe einige Themes ausprobiert, bin damit aber nicht wirklich glücklich geworden. Meine alte Webseite basierte im Wesentlichen auf “Vanilla” Boostrap, so dass ich mir selbst ein sehr einfaches Template zusammengebaut habe:

├─ themes
   └─ my-bootstrap-theme
      ├─ archetypes
      ├─ assets
      │  ├─ css
      │  │  ├─ bootstrap.min.css
      │  │  └─ my.css
      │  │  └─ syntax.css
      │  └─ js
      │     └─ bootstrap.bundle.min.js
      └─ layouts
         ├─ ...

In der hugo.yaml (ich verwende eine YAML- und keine TOML-Konfiguration 😇) wird das Theme wie gehabt mit theme: "my-bootstrap-theme" eingebunden und fertig.

Das zweite my.css Style Sheet beinhaltet ein paar Klassen (z. B. right-to-left-Text um das Scrapen von Kontaktdaten zu erschweren), die ich in einigen Dokumenten verwende. Das Theme-Skelett kann hier als zip-Datei heruntergeladen werden.