10 Hugo-Tipps für Anfänger

10 Hugo-Tipps für Anfänger

Du bist neu bei Hugo? Hier sind 10 praktische Tipps, die dir den Einstieg erleichtern.

1. Nutze die Extended Version

Stelle sicher, dass du Hugo Extended installiert hast, da viele moderne Themes (wie Hextra) SCSS-Verarbeitung benötigen.

hugo version
# Sollte "extended" enthalten

2. Front Matter verstehen

Jede Markdown-Datei beginnt mit Front Matter (Metadaten):

---
title: "Mein Titel"
date: 2025-01-20
draft: false
tags: ["tag1", "tag2"]
---

3. Draft-Modus nutzen

Arbeite an Entwürfen ohne sie zu veröffentlichen:

hugo new content/blog/entwurf.md
# draft: true im Front Matter

# Zum Anzeigen von Entwürfen:
hugo server --buildDrafts

4. Live Reload

Der Hugo-Server hat Live Reload eingebaut - Änderungen werden sofort sichtbar:

hugo server

5. Archetypes verwenden

Erstelle Templates für neue Inhalte in archetypes/:

# archetypes/blog.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: []
---

6. Shortcodes nutzen

Hugo bietet viele eingebaute Shortcodes:

{{< youtube VIDEO_ID >}}
{{< figure src="bild.jpg" title="Titel" >}}

7. Organisiere deine Inhalte

Nutze Unterverzeichnisse für bessere Organisation:

content/
├── blog/
│   ├── 2025/
│   └── 2024/
├── docs/
└── about/

8. Konfiguration testen

Teste deine Konfiguration:

hugo config

9. Build für Produktion

Erstelle optimierte Builds:

hugo --minify

10. Lerne Markdown

Beherrsche Markdown für effizientes Schreiben:

• Markdown Guide
• CommonMark Spec

11. Images

Option 1: Page Bundles (Empfohlen für Blogposts)

Jeder Blogpost bekommt einen eigenen Ordner mit allen Assets:

  content/blog/
  ├── mein-post/
  │   ├── index.md          # Der Blogpost
  │   ├── bild1.jpg         # Bild für diesen Post
  │   ├── bild2.png
  │   └── dokument.pdf
  ├── anderer-post/
  │   ├── index.md
  │   └── screenshot.png

Vorteil: Alles zusammen, gut organisiert, Assets nur für diesen Post

Verwendung im Markdown: ![Beschreibung](bild1.jpg)

Option 2: Globaler static/ Ordner

Alle Assets zentral im static/ Ordner:

static/
├── images/
│ ├── blog/
│ │ ├── post1-bild.jpg
│ │ └── post2-bild.jpg
│ └── logo.png
└── files/
└── dokument.pdf

Verwendung im Markdown: ![Beschreibung](/images/blog/post1-bild.jpg)

Option 3: assets/ Ordner (Für verarbeitete Bilder)

Für Bilder, die Hugo verarbeiten soll (resizing, etc.):

assets/
└── images/
└── blog/
└── hero.jpg

Verwendung mit Hugo Shortcodes/Templates

Bonus-Tipp

Nutze Git für Versionskontrolle:

git init
git add .
git commit -m "Initial commit"

Fazit

Hugo ist ein mächtiges Tool. Mit diesen Tipps bist du gut gerüstet für den Einstieg!

Viel Erfolg! ⭐