Hugo Projektstruktur #

Ein typisches Hugo-Projekt hat folgende Verzeichnisstruktur:

meine-website/
├── archetypes/       # Vorlagen für neue Inhalte
├── assets/           # Dateien, die durch Hugo Pipes verarbeitet werden
├── content/          # Alle Inhalte als Markdown-Dateien
├── data/             # Konfigurationsdateien (YAML, JSON, TOML)
├── layouts/          # HTML-Templates
├── public/           # Generierte Website (HTML, CSS, JS)
├── static/           # Statische Dateien (CSS, JS, Bilder)
├── themes/           # Installierte Themes
└── config.toml       # Hauptkonfigurationsdatei

Wichtige Verzeichnisse im Detail #

content/ #

Hier liegen alle Inhalte der Website als Markdown-Dateien. Die Verzeichnisstruktur bestimmt die URL-Struktur:

content/
├── _index.md         # Homepage
├── blog/             # Blog-Sektion (URL: /blog/)
│   ├── _index.md     # Blog-Übersichtsseite
│   └── post1.md      # Einzelner Beitrag (URL: /blog/post1/)
└── about.md          # Über-uns-Seite (URL: /about/)

layouts/ #

Enthält HTML-Templates, die bestimmen, wie der Inhalt dargestellt wird:

layouts/
├── _default/         # Standard-Templates
│   ├── baseof.html   # Basis-Template für alle Seiten
│   ├── list.html     # Template für Listen (z.B. Blog-Übersicht)
│   └── single.html   # Template für einzelne Seiten
├── partials/         # Wiederverwendbare Template-Teile
│   ├── header.html
│   └── footer.html
└── shortcodes/       # Benutzerdefinierte Shortcodes
    └── youtube.html

public/ #

Enthält die generierte statische Website. Dieses Verzeichnis wird automatisch von Hugo erstellt, wenn Sie den Befehl hugo ausführen (ohne server):

public/
├── index.html        # Generierte Homepage
├── css/              # Generierte/kopierte CSS-Dateien
├── js/               # Generierte/kopierte JavaScript-Dateien
├── images/           # Kopierte Bilder
└── blog/             # Generierte Blog-Seiten
    ├── index.html    # Blog-Übersichtsseite
    └── post1/        # Einzelner Beitrag
        └── index.html

Wichtig: Das public/-Verzeichnis enthält die fertige Website und sollte nicht manuell bearbeitet werden. Alle Änderungen sollten in den Quelldateien (content/, layouts/, etc.) vorgenommen werden. Hugo generiert dann automatisch die Dateien im public/-Verzeichnis neu.

static/ #

Enthält statische Dateien, die unverändert in die generierte Website kopiert werden:

static/
├── css/              # CSS-Dateien
├── js/               # JavaScript-Dateien
└── images/           # Bilder

themes/ #

Enthält installierte Themes. Ein Theme ist eine vollständige Vorlage für eine Hugo-Website:

themes/
└── mein-theme/       # Ein installiertes Theme
    ├── archetypes/
    ├── layouts/
    ├── static/
    └── theme.toml    # Theme-Konfiguration

Konfigurationsdatei #

Die Hauptkonfigurationsdatei (config.toml, config.yaml oder config.json) enthält alle Einstellungen für die Website:

# Grundlegende Einstellungen
baseURL = "https://example.com/"
languageCode = "de-de"
title = "Meine Website"
theme = "mein-theme"

# Weitere Einstellungen
[params]
  description = "Eine tolle Website"
  author = "Max Mustermann"

# Menü-Einstellungen
[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "Blog"
    url = "/blog/"
    weight = 2