Hugo Basics

Hugo Basics #

Was ist Markdown? #

Markdown ist eine einfache Auszeichnungssprache, mit der Sie Texte formatieren können. Hugo verwendet Markdown für alle Inhalte.

Grundlegende Markdown-Syntax: # 

# Überschrift 1
## Überschrift 2
### Überschrift 3

**Fett** oder __Fett__
*Kursiv* oder _Kursiv_

- Listenpunkt 1
- Listenpunkt 2
  - Unterpunkt 2.1

1. Nummerierter Punkt 1
2. Nummerierter Punkt 2

[Link-Text](https://example.com)

![Bild-Beschreibung](pfad/zum/bild.jpg)

> Zitat-Text

`Inline-Code`

```code
Code-Block


## Frontmatter

Jede Markdown-Datei in Hugo beginnt mit einem "Frontmatter" - einem Bereich mit Metadaten zwischen drei Bindestrichen (`---`):

```yaml
---
title: "Mein Titel"
date: 2023-01-01
draft: false
categories: ["Kategorie1", "Kategorie2"]
tags: ["Tag1", "Tag2"]
---

Wichtige Frontmatter-Felder:

  • title: Der Titel der Seite
  • date: Das Erstellungsdatum
  • draft: Wenn true, wird die Seite nur im Entwicklungsmodus angezeigt
  • categories/tags: Kategorien und Tags für die Seite
  • weight: Bestimmt die Reihenfolge in Menüs und Listen

Inhaltsstruktur #

Hugo organisiert Inhalte in Verzeichnissen:

  • Jedes Verzeichnis unter content/ kann eine eigene Sektion sein
  • Eine _index.md-Datei definiert die Hauptseite einer Sektion
  • Die Verzeichnisstruktur bestimmt die URL-Struktur

Beispiel:

content/
├── _index.md                 # Homepage
├── blog/
│   ├── _index.md             # Blog-Übersichtsseite
│   ├── erster-beitrag.md     # Einzelner Blogbeitrag
│   └── zweiter-beitrag.md    # Weiterer Blogbeitrag
└── about.md                  # Über-uns-Seite

Shortcodes #

Shortcodes sind spezielle Hugo-Befehle, die in Markdown eingefügt werden können, um komplexere Inhalte einzubinden:

Häufig verwendete Shortcodes:

  • figure: Für Bilder mit Beschriftung
  • youtube: Für YouTube-Videos
  • twitter: Für Twitter-Beiträge
  • highlight: Für Code mit Syntax-Hervorhebung