Hugo statt jekyll

14. Juli 2017

Kaum beschäftigt man sich etwas mit Generatoren von statischen Webseiten, schon findet man vielversprechende Konkurrenz. Das auf Ruby basierende jekyll ist schon deutlich länger im Geschäft als hugo, entsprechend finden sich auch mehr Anleitungen und Hilfen für jekyll. Das Schöne an hugo ist seine Kompaktheit. Es besteht nur aus einer ausführbaren Datei und nicht aus vielen verschiedenen Paketen wie jekyll. Das erleichtert die Installation deutlich, aber alles was hugo nicht von selbst mitbringt, ist nicht sooo einfach nachzurüsten. Ein Beispiel dazu ist das Syntax-Highlighting. Bei jekyll wurde es mittels CSS und einer gewissen Anpassung der HTML-Daten umgesetzt. Hugo setzt hierbei (noch?) auf javascript. Hier hat sich was getan, siehe.

Neues Projekt

Zu allererst legt man mit

$ hugo new site NeueHP

ein neues Projekt an. Das ist leer und damit man überhaupt etwas zu sehen bekommt, muss man eine Vorlage dem Projekt hinzugefügt werden. Für diese Seite wurde Minimal gewählt. Zum Hinzufügen klont man die Vorlage einfach ins Projektverzeichnis wie folgt.

$ cd NeueHP
$ git clone http://github.com/calintat/minimal/ themes/minimal

Anschließend kopiert man noch die Beispielkonfiguration.

$ cp themes/minimal/exampleSite/config.toml .

Alle Vorlagen haben eine Beispielkonfiguration und diese passt man natürlich noch an.

Einträge hinzufügen

Neue Einträge lassen sich händisch erstellen, aber hugo nimmt einem das auch ab. Ein neuer Blogeintrag wird mit

$ hugo new post/neuer-eintrag.md

erstellt, eine neue Seite mit

$ hugo new ueber-mich.md

Während die Blogeinträge automatisch indiziert werden, verlangt die verwendete Vorlage für die Verlinkung von “Seiten” Handarbeit. Der Einstiegspunkt hierfür ist die Konfigurationsdatei config.toml.

Seite darstellen

Mit

$ hugo server

startet hugo einen Webserver, der unter localhost:1313 erreichbar ist, und mit dem Parameter -t Vorlagenname können auf einfache Weise verschiedenste Vorlagen ausprobiert werden. Allerdings zieht dies i.d.R. eine Anpassung der Konfigurationsdatei config.toml nach sich.

Konfigurationsdatei anpassen

Während jekyll die fertige Webseite unter _site ablegt, legt hugo diese standardmäßig unter public ab. Das beißt sich mit den bestehenden Domainstellungen, die hier beschrieben sind. Deshalb muss in der Konfigurationsdatei config.toml noch folgende Zeile hinzugefügt werden.

publishdir = "_site/"

Webseite generieren

Ein einfacher Aufruf von hugo ist alles was zu tun ist.

$ hugo

Anschließend findet sich im Projektverzeichnis der Ordner _site (bzw. public).

Vorlage aufmotzen

Im Gegensatz zur Vorlage verwendet diese Seite tags. Die Funktionalität habe ich der Vorlage hugo-now entnommen und mein Gesamtkonstrukt findet sich auf GitHub. Auch sind mit Ausnahme der Schrift alle CDN-Verknüpfungen entfernt worden.

Hugo und Syntax Highlighting

13. Juni 2019

all-inkl & git & jekyll

5. Mai 2017