[TOC]

Hugos Command Line Interpreter (CLI) erstellt eine Verzeichnisstruktur und nimmt dann dieses Verzeichnis und verwendet es für die Erstellung einer kompletten Website.

New Site - Scaffolding (Gerüstbau)

Wird der hugo new site generator von der Kommandozeile ausgeführt, wird eine Verzeichnisstruktur mit den folgenden Elementen erstellt:

• archetypes
• assets
• config
• content
• data
• layouts
• static
• themes

Der folgende Überblick erklärt die einzelnen Verzeichnisse mit Links zu den jeweiligen Abschnitten innerhalb der offiziellen Hugo-Dokumentation.

archetypes

Neue Inhaltsdateien (das sind die zu generierenden Websites mit unterschiedlichen Inhaltstypen wie posts, pages etc,) werden in Hugo mit dem Befehl

# hugo new titel-der-seite.md

erstellt. Standardmäßig enthalten neue Inhaltsdateien mindestens

• einen Titel title: (abgeleitet aus dem Dateinamen, hier z.B. Titel der Seite),
• das Datum date: und
• den Eintrag draft = true (die Site ist als Entwurf gekennzeichnet, wird nicht generiert und erscheint folglich auch nicht im public-Verzeichnis; das erfolgt erst durch die Einstellung draft = false).

Da diese Struktur für alle neu erstellten Inhaltsdateien gelten soll, wird sie im Verzeichnis archtypes/ definiert. Mit Archetype ist eine bestimmte Struktur beschrieben, die sich immer wiederholt. Hier bezieht sie sich auf Content Front Matter, wo diejenigen Informationen definiert sind, die über eine bestimmte Website gespeichert werden. Wie z.B. beim Schreiben eines Blogbeitrags (post) der Titel des Beitrags, das Datum und die Kennzeichnung als Entwurf. Dieses Verfahren spart Zeit und fördert die Konsistenz für Websites, die mehrere Inhaltstypen wie posts, pages etc. verwenden. Für jeden Inhaltstyp ist eine eigene Vorlage (default.md, posts.md etc.) definiert, die sich je nach ausgewähltem Theme unterscheiden kann.

Achtung: Mit der Erstellung eines neuen Projekts mit Hugo

# hugo new site Titel-des-Projekts

wird auch ein Verzeichnis archetypes/ mit der Datei default.md angelegt, die jedoch mit den Vorlagen aus dem archetypes-Verzeichnis des Themes themes/name-des-themes/archetypes überschrieben wird.

Photo by Hannes Wolf on Unsplash

Wie erwähnt können je nach Theme die Archetypes verschieden sein. Bei dem Theme hello-friend-ng definiert die Angaben in der Datei defaut.md im Verzeichnis archetypes/ die Struktur einer beliebigen Website z.B. page und sieht so aus:

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true

Bei der Erstellung eines neuen Beitrags post wird die Vorlage posts.md zurückgegriffen, die folgendermaßen aussieht:

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
toc: false
images:
tags: [posts, blog]

Mehr dazu gibt es hier im Blog oder da.

assets

In dem Verzeichnis assets/ werden alle Dateien, Daten, und Medien gespeichert, die von Hugo Pipes verarbeitet werden müssen. Nur die Dateien, deren .Permalink oder .RelPermalink verwendet werden, werden im Verzeichnis public/ veröffentlicht (siehe auch Digital Asset oder Medieninhalt).

Bei dem Theme hello-friend-ng liegen im Verzeichnis assets/ zwei Unterverzeichnisse

• js/ (mit den Dateien main.js, menu.js, prism.js und theme.js)
• scss/ (mit den vielen Dateien).

config

Hugo wird mit einer Vielzahl von Konfigurationsanweisungen ausgeliefert. Im Konfigurationsverzeichnis werden diese Anweisungen als JSON-, YAML- oder TOML-Dateien gespeichert. Jedes Objekt im Wurzelverzeichnis kann als eigene Datei stehen und nach Vorlagen strukturiert sein. Projekte mit minimalen Einstellungen können eine einzige config.toml-Datei im Stammverzeichnis verwenden.

Viele Websites benötigen vielleicht wenig bis gar keine Konfiguration, aber Hugo wird mit einer großen Anzahl von Konfigurationsanweisungen für detailliertere Anweisungen geliefert, wie Hugo die Website erstellen soll.

Für das Theme hello-friend-ng sind meine Einstellungen hier beschrieben.

Photo by Hudson Hintze on Unsplash

content

Der Inhaltsordner ist der Ort, an dem alle Websites gespeichert werden (nicht wirklich überraschend), d.h. alle Blog-Posts, Artikel und wirklich alle Webinhalte sind hier zu finden. Jeder Top-Level-Ordner in Hugo wird als Inhaltsbereich betrachtet.

Wenn die Website beispielsweise drei Hauptabschnitte hat - Blog, Artikel und Tutorials -, werden drei Unterverzeichnisse angelegt

• content/blog,
• content/artikel und
• content/tutorials.

data

Der Datenordner ist im Wesentlichen eine Datenbank. Er ist ein Ort, an dem Daten gespeichert sind, die auf der Website verwendet werden müssen. Im Allgemeinen enthält der Datenordner eine Reihe von Dateien mit Listen von Informationen.

In diesem Verzeichnis werden Konfigurationsdateien gespeichert, die von Hugo bei der Erstellung der Website verwendet werden. Diese Dateien sind im Format YAML, JSON oder TOML geschrieben. Zusätzlich können Datenvorlagen aus dynamischen Inhalten erstellt werden.

Im Falle eines Reiseblogs könnten hier z.B. eine Liste der Länder und ihrer Hauptstädte im Datenbereich gespeichert werden. Dann könnte leicht auf diese Daten im gesamten Blog zugegriffen werden.

Photo by Markus Spiske on Unsplash

layouts

Eines der grundlegenden Werkzeuge, mit denen Hugo die Website strukturiert, sind Layouts. Layouts sind im Grunde genommen Skelette (Vorlagen in Form von .html-Dateien), die festlegen, wie Ansichten der Inhalte in eine statische Website generiert werden.

Die Vorlagen umfassen Listenseiten, Taxonomievorlagen, Einzelseitenvorlagen und mehr.

Das einfachste Layout für eine Website wäre eine Kopf- und eine Fußzeile. Die meisten Websites haben oben einen Navigationskopf, über den Benutzer auf Site-Links zugreifen können. Und eine Fußzeile am unteren Rand mit zusätzlichen Informationen. Da diese Elemente oft auf jeder Seite vorkommen, können sie in ein Layout platziert werden, so dass sie nur einmal geschrieben werden müssen.

static

Das Verzeichnis static/ könnte auch als Sonstiger Ordner bezeichnet werden. Es wird verwendet, um alles zu speichern, was nicht in die anderen Ordner geht. Alles im statischen Ordner ist statisch, d.h. er ändert sich nicht von Seite zu Seite. Normale Inhalte des statischen Ordners sind CSS-, JS- und Bilddateien.

Ein gutes Beispiel für die Verwendung des statischen Ordners ist die Überprüfung des Website-Eigentums in der Google Search Console, wo Hugo eine komplette HTML-Datei kopieren soll, ohne den Inhalt zu ändern.

Photo by Sharon McCutcheon on Unsplash

Ab Hugo 0.31 können mehrere statische Verzeichnisse angelegt werden.

themes

Es ist bestimmt eine gute Idee, ein Theme für die Website zu nutzen. Alle Dateien des Themes befinden sich in diesem Verzeichnis. Im Allgemeinen sollten diese Dateien nicht verändert werden.

Für das Theme hello-friend-ng sieht das Verzeichnis so aus:

• archetypes
• assets
• data
• exampleSite
• i18n
• images
• layouts
• resources
• static

mit den Dateien:

• LICENSE.md
• package.json
• package-lock.json
• README.md
• theme.toml

Photo by Patrick Tomasso on Unsplash