Serie: Statische Website-Generatoren – 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 sie den ersten Teil bisher nicht gelesen haben, 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-Themen 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 ” beispiel:=”” findet=”” hugo=”” man=”” seiten=”” src=”https://gnulinux.ch/bl-content/uploads/pages/797a00454927c469cb9c904904960f00/hugo2_themes.png” themes=”” wie=”” x=”” zum=””>

• 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, sie möchtet eine Bio-Site für euch aufbauen. Diese kann für Bewerbungen, Selbstpr&auml:sentationen in Projekten oder für andere Ego-Bedürfnisse nützlich sein. Nun suchen wir nach einem geeigneten Hugo-Thema. Dafür bietet sich bei den offiziellen Hugo-Themen der Tag persönlich an. Dort findet man knapp 100 Themes, von denen die meisten Schrott sind. Nach einem wenig rauf-und-runter-Scrollen findet man dieses Theme:

Das Theme heißt ” findet=”” href=”https://themes.gohugo.io/themes/hugo-split-theme/” sich=”” split=”” src=”https://gnulinux.ch/bl-content/uploads/pages/797a00454927c469cb9c904904960f00/split_theme_preview.png” und=””>hier bei den Hugo-Themes. Dort findet man auch einige wichtige Informationen:

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 sie den Ordner benannt hat; Hauptsache, sie hat einen Ordner für Ihren 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 dieGitHub-Seite.

Zusammenfassung der Vorbereitung:

1. Hugo ist installiert
2. Die neue Seite meine Seite wird erstellt, z.B. in: /home/ralf/delme/hugo/meineseite/
3. Darin hat sie git initialisiert: Git-Init

Nun navigiert sie in das Verzeichnis: …/hugo/meineseite/und klont dorthin das Theme:

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

Wenn Sie jetzt in das Verzeichnis Themen 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). Sie könnt das überprüfen, indem Sie im Verzeichnis themes/name_des_themes nach einem Verzeichnis exampleSite (oder so ähnlich) Ausschau haltet. Falls es eine Demo gibt, navigiert sie im Terminal in diese BeispielSeite 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 meiner Seite 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 meiner Seite:

• Inhalt (das Verzeichnis ist leer; darin liegen später eure Seiten)
• statisch (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 VerzeichnisexampleSiteWithImage oder exampleSiteWithVideo inmeine Seite. Dieser Schritt gilt für alle Themes, falls sie 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 Themas; dort steht, was sie machen müsst.

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

Wie sie sieht, habe ich den Inhalt der Theme-Vorlage bereits ein wenig ge&aumlndert.

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 heißt 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