Serie: Static Site Generators - Hugo (Teil 2)

Inhaltsverzeichnis

1. Einleitung
2. Hugo Teil 1
3. Publii
4. Hugo Teil 2 (das ist dieser Artikel)
5. mdBook
6. Hugo Teil 3
7. Pandoc/Markdown

Im ersten Teil unserer Artikelserie über SSGs habe ich die Einrichtung, Grundstruktur und das Erstellen einer ganz einfachen Website mit Hugo erklärt. In diesem zweiten Teil möchte ich einige Details näher beleuchten und wichtige Tipps und Tricks vermitteln. Falls ihr den ersten Teil bisher nicht gelesen habt, empfehle ich, das nachzuholen.

Ein Theme finden

Egal, welche Werkzeuge man für die Erstellung einer Website verwendet, die Designentwürfe (Themes) gibt es immer und überall. Über die Jahre haben sich die Themes als Goldgrube für kommerzielle Anbieter entwickelt. Dabei spielt es keine Rolle, ob wir von FOSS-Werkzeugen (wie Hugo), oder von proprietären Angeboten reden. Es gibt freie und kostenpflichtige Themes, und zwar unabhängig von der Lizenz des SSGs.

Die erste Anlaufstelle für Hugo-Themes ist die projekteigene Unterseite: https://themes.gohugo.io/ Dort findet man ein paar Hundert Themes, die zum Glück kategorisiert (Tags) sind:

Sucht man im Internet nach "Hugo Themes" findet man x Seiten, wie zum Beispiel:

• https://hugothemes.dev/
• https://themefisher.com/best-hugo-themes
• https://www.besthugothemes.com/

Bei der Auswahl des Themes muss man aufpassen. Es gibt freie, es gibt kostenlose, es gibt alles Mögliche an Themes. Und es gibt Abzocker. Die Auswahl eines geeigneten Themes gehört zu den wichtigsten Aufgaben, wenn man eine Website erstellen möchte. Das gilt generell, und nicht nur für SSG-Seiten. Der häufigste Fehler besteht darin, sich von Bildern, Farben, Fonts und Beispielinhalten beeindrucken zu lassen. Das ist alles völlig irrelevant. Bei der Auswahl eines passenden Themes zählen nur zwei Dinge: das Grunddesign und die Struktur.

Genug des theoretischen Gelabers; lasst uns ein konkretes Beispiel anschauen. Angenommen, ihr möchtet eine Bio-Site für euch aufbauen. Diese kann für Bewerbungen, Selbstpräsentationen in Projekten oder für andere Ego-Bedürfnisse nützlich sein. Nun suchen wir nach einem geeigneten Hugo-Theme. Dafür bietet sich bei den offiziellen Hugo-Themes der tag personal an. Dort findet man knapp 100 Themes, von denen die meisten Schrott sind. Nach ein wenig rauf-und-runter-Scrollen findet man dieses Theme:

Das Theme heisst "Split" und findet sich hier bei den Hugo-Themes. Dort findet man auch einige wichtige Informationen:

In der Regel findet man bei den Hugo-Themes einen Download und Demo-Button. Der Demo-Button ist wichtig, um sich einen tieferen Eindruck zum Theme verschaffen zu können. Leider fehlt dieser Botton beim Split-Theme. An dieser Stelle beginnt die Reise ins Kaninchenloch der Hugo-Themes. Die Internetsuche nach "Hugo Split Theme" führt uns zu dieser Seite. Dort findet man eine Demo-Installation und ein Preisschild von 9 Dollar. Die Demo-Seite ist häufig kaputt, so auch in diesem Fall.

Als Nächstes führt uns die Suche zu dieser GitHub-Seite, auf der wir mehr Informationen finden, allerdings nicht die Demo-Seite. Bei diesem Theme handelt es sich um einen Fork des originalen Split-Themes, was uns nicht weiter kümmern soll. Aufgrund der fehlenden Demo-Seite, bauen wir den ersten Eindruck selbst.

Das Theme verwenden

Dazu öffnet ihr ein Terminal und wechselt in euren Hugo- oder Dev- oder Development/Hugo-Ordner. Es spielt keine Rolle, wie ihr den Ordner benannt habt; Hauptsache, ihr habt einen Ordner für eure Hugo-Eskapaden angelegt. Ich verweise auf die Vorbereitungen, die ich im ersten Teil zu Hugo beschrieben habe. Für die Installation verlassen wir uns auf die GitHub-Seite.

Zusammenfassung der Vorbereitung:

1. Hugo ist installiert
2. Die neue Seite meineseite ist erstellt, z.B. in: /home/ralf/delme/hugo/meineseite/
3. Darin habt ihr git initialisiert: git init

Nun navigiert ihr in das Verzeichnis: .../hugo/meineseite/ und klont dorthin das Theme:

cd themes
git clone https://github.com/escalate/hugo-split-theme.git

Wenn ihr jetzt in das Verzeichnis themes schaut, seht ihr darin das Unterverzeichnis hugo-split-theme. So wie gerade beschrieben, ist es möglich, für ein Hugo-Projekt beliebig viele weitere Themes zu installieren, zwischen denen man wechseln kann.

Häufig enthält das Theme eine vollständige Demo-Seite (beim Split-Theme ist das leider nicht der Fall). Ihr könnt das überprüfen, indem ihr im Verzeichnis themes/name_des_themes nach einem Verzeichnis exampleSite (oder so ähnlich) Ausschau haltet. Falls es eine Demo gibt, navigiert ihr im Terminal in diese exampleSite und startet diesen Befehl: hugo server. Danach könnt ihr euch im Webbrowser die Demo-Seite unter http://localhost:1313/ ansehen.

Da das Split-Theme keine Demo-Seite enthält, erstellen wir diese selbst. Bei diesem Theme gibt es zwei Test-Konfigurationen im Unterverzeichnis tests: exampleSiteWithImage und exampleSiteWithVideo. Diese kann man nicht direkt aus ihren Verzeichnissen ausführen, sondern muss ein paar Verzeichnisse und Dateien in meineseite kopieren. Das ist der übliche Weg, um ein Theme für die eigene Website zu verwenden. Anstatt alles von Anfang an selbst aufzubauen, nimmt man die Theme-Demo als Grundlage für die Umgestaltung der eigenen Seite.

Könnt ihr mir noch folgen, oder ist es zu kompliziert?

Zuerst löscht ihr diese beiden Verzeichnisse und diese eine Datei aus meineseite:

• content (das Verzeichnis ist leer; darin liegen später eure Seiten)
• static (das Verzeichnis ist leer; darin liegen später eure Media-Dateien)
• hugo.toml (das ist die Konfigurationsdatei für eure Website; dazu später mehr)

Nachdem ihr diese gelöscht habt, kopiert ihr die Gleichen aus dem Verzeichnis exampleSiteWithImage oder exampleSiteWithVideo in meineseite. Dieser Schritt gilt für alle Themes, falls ihr die Vorarbeiten der Theme-Entwickler weiterverwenden möchtet. Die Anzahl der zu kopierenden Verzeichnisse und Dateien kann von Theme zu Theme unterschiedlich sein. Schaut in die Dokumentation des Themes; dort steht, was ihr machen müsst.

Nun startet ihr im Verzeichnis meineseite mit dem Befehl hugo server einen lokalen Webserver. Das Ergebnis könnt ihr euch im Webbrowser unter der Adresse http://localhost:1313/ ansehen. Während ihr an der Website Veränderungen vornehmt, könnt ihr den Webserver laufen lassen. Er lauscht auf eure Anpassungen und stellt sie sofort im Browser dar:

Wie ihr seht, habe ich den Inhalt der Theme-Vorlage bereits ein wenig geändert.

Es sieht so aus, als dürfte ich noch einen dritten Teil zu Hugo schreiben. Darin werde ich auf die normale und die fortgeschrittene Konfiguration eingehen. So viel vorab:

• Die Hauptkonfiguration findet in der Datei hugo.toml statt (manchmal heisst sie hugo.yaml; das hängt vom Theme ab).
• Das Titelbild habe ich im Verzeichnis static geändert.
• Die Änderungen von Name, Titel und Text waren bereits das übliche Hugo-Gewürge. Als Teaser für den dritten Teil verrate ich nur so viel: Der Befehl: grep -r Suchwort * wird euer bester Freund.

Titelbild: https://gohugo.io/images/hugo-logo-wide.svg

Quellen: stehen alle im Text