Die erste statische Website - Schritt für Schritt
Ein praktischer Workshop mit Erfolgserlebnissen
✓ Hugo installieren und dein erstes Projekt starten✓ Die Verzeichnisstruktur verstehen
✓ Eigene Inhalte und Seiten erstellen
✓ Mit Templates arbeiten
✓ Mehrsprachige Websites bauen
✓ Deine fertige Website veröffentlichen
Was ist Hugo? (In 2 Minuten erklärt)
Stell dir vor: Du schreibst deine Texte in einfachen Textdateien (Markdown), drückst auf einen Knopf, und Hugo verwandelt das alles in eine komplette Website.Wie funktioniert das?
1. Du schreibst Inhalte in Markdown-Dateien (.md)2. Hugo nimmt deine Inhalte und steckt sie in deine Templates
3. Heraus kommen fertige HTML-Seiten im public/ Ordner
4. Den public/ Ordner kannst du dann einfach auf einen Server hochladen - fertig!
2. Hugo installieren
Schritt 1: Hugo herunterladen
# Für macOS (mit Homebrew):brew install hugo
# Für Windows (mit Chocolatey):
choco install hugo-extended -y
# Für Linux (Ubuntu/Debian):
sudo apt-get install hugo
# Überprüfen, ob die Installation erfolgreich war:
hugo version
Wenn du eine Versionsnummer siehst (z.B. 'hugo v0.121.0'), hat es funktioniert!
Schritt 2: Dein erstes Projekt erstellen
# Erstelle einen neuen Ordner für dein Projekt:hugo new site meine-website
# Wechsel in den Ordner:
cd meine-website
Hugo hat jetzt einen Ordner 'meine-website' erstellt mit allen wichtigen Dateien drin.
■ ERFOLG: Dein erstes Hugo-Projekt ist ins Leben gerufen.
3. Die Verzeichnisstruktur verstehen
Hugo hat einige Ordner erstellt. Keine Sorge - du brauchst nicht alle! Hier sind die wichtigsten:Ordner
Wofür ist der?
content/
Deine Inhalte (Texte, Artikel)
layouts/
Deine Templates (wie die Seiten aussehen)
static/
Bilder, CSS, JavaScript
themes/
Fertige Designs (optional)
public/
Die FERTIGE Website (wird automatisch erstellt)
hugo.toml
Einstellungen für deine Website
■ Tipp: Den public/ Ordner brauchst du nie selbst zu bearbeiten - Hugo erstellt ihn automatisch!
Der Workflow:
1. Du schreibst in content/ (deine Texte)
2. Du gestaltest in layouts/ (wie es aussieht)
3. Du startest Hugo
4. Hugo erstellt public/ (fertige Website!)
4. Deine erste Seite erstellen
Schritt 1: Eine Startseite erstellen
Erstelle eine Datei content/_index.md mit folgendem Inhalt:---
title: "Willkommen auf meiner Website"
date: 2024-01-15
---
# Hallo Welt!
Das ist meine erste Hugo-Website.
## Was ich hier mache
- Ich lerne Hugo
- Ich baue coole Websites
- Ich habe Spaß dabei!
**Danke für deinen Besuch!**
Die Zeilen zwischen --- nennt man 'Front Matter'. Hier stehen Informationen ÜBER die Seite
(Titel, Datum, etc.).
Schritt 2: Ein einfaches Template erstellen
Erstelle eine Datei layouts/_default/baseof.html:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
line-height: 1.6;
}
h1 { color: #1a472a; }
h2 { color: #2d5f3f; }
</style>
</head>
<body>
{{ block "main" . }}{{ end }}
</body>
</html>
Jetzt erstelle layouts/_default/list.html:
{{ define "main" }}
<main>
<h1>{{ .Title }}</h1>
{{ .Content }}
</main>
{{ end }}
■ Deine erste Seite ist fertig!
5. Der Dev-Server - Sieh deine Website LIVE!
Starte den Hugo-Server:hugo server -D
Das -D bedeutet auch Entwürfe (Drafts) anzeigen zu lassen.
Du siehst jetzt sowas wie:
Web Server is available at http://localhost:1313/
Press Ctrl+C to stop
Öffne jetzt deinen Browser und gehe zu: http://localhost:1313
■ Du siehst deine erste Hugo-Website.
Live-Reload Magic! ■
Jetzt kommt der coole Teil: Lass den Server laufen und ändere etwas in deiner
content/_index.md Datei. Speichere die Datei.
→ Der Browser aktualisiert automatisch! Du siehst deine Änderungen sofort!
■ Tipp: Lass den Server beim Entwickeln immer laufen. Mit Strg+C kannst du ihn stoppen.
Debug-Modus:
hugo server -D --verbose --debug
Mit --verbose und --debug siehst du genau, was Hugo macht. Perfekt wenn etwas nicht
funktioniert!
6. Variablen und String-Manipulation
Was sind Variablen in Hugo?
Variablen sind wie Platzhalter. Hugo füllt sie automatisch mit Werten.Die wichtigsten Variablen:
Variable
Was steht drin?
{{ .Title }}
Der Titel der Seite
{{ .Content }}
Der Inhalt der Seite
{{ .Date }}
Das Datum der Seite
{{ .Permalink }}
Die URL der Seite
{{ .Site.Title }}
Der Titel deiner Website
String-Manipulation - Texte verändern
Hugo hat eingebaute Funktionen, um Texte zu ändern:<!-- Alles GROSS schreiben -->
{{ .Title | upper }}
<!-- Alles klein schreiben -->
{{ .Title | lower }}
<!-- Ersten Buchstaben groß -->
{{ .Title | title }}
<!-- Text kürzen (erste 100 Zeichen) -->
{{ .Content | truncate 100 }}
<!-- Datum formatieren -->
{{ .Date.Format "02.01.2006" }}
Praktisches Beispiel:
Erstelle layouts/_default/single.html für einzelne Seiten:
{{ define "main" }}
<article>
<h1>{{ .Title | upper }}</h1>
<p>Veröffentlicht am: {{ .Date.Format "02.01.2006" }}</p>
<hr>
{{ .Content }}
<hr>
<p><a href="/">← Zurück zur Startseite</a></p>
</article>
{{ end }}
Erstelle jetzt eine neue Seite content/über-mich.md:
---
title: "Über mich"
date: 2024-01-15
---
# Hallo! Ich bin Max
Ich lerne gerade Hugo und es macht richtig Spaß!
## Meine Hobbys
- Programmieren
- Websites bauen
- Neues lernen
Gehe zu: http://localhost:1313/über-mich - und sieh dir deine neue Seite an!
■ ERFOLG: Du kannst jetzt mit Variablen arbeiten!
7. Templates verstehen und anpassen
Wie Templates zusammenarbeiten
Hugo nutzt verschiedene Template-Dateien für verschiedene Zwecke:Template
Wofür?
baseof.html
Das Basis-Gerüst für ALLE Seiten
list.html
Listen (z.B. alle Blog-Artikel)
single.html
Einzelne Seiten
index.html
Die Startseite (Homepage)
Ein Navigation-Menü hinzufügen
Lass uns dein baseof.html erweitern mit einem Menü:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{ .Site.Title }} - {{ .Title }}</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
nav {
background: #1a472a;
padding: 15px;
margin-bottom: 30px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 20px;
}
nav a:hover { text-decoration: underline; }
h1 { color: #1a472a; }
</style>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/über-mich">Über mich</a>
<a href="/blog">Blog</a>
</nav>
{{ block "main" . }}{{ end }}
<footer style="margin-top: 50px; text-align: center; color: #666;">
<p>© 2024 {{ .Site.Title }}</p>
</footer>
</body>
</html>
■ Du hast jetzt ein Navigation-Menü!
Partials - Wiederverwendbare Teile
Partials sind Code-Schnipsel, die du überall verwenden kannst. Erstellelayouts/partials/header.html:
<header>
<h1 style="text-align: center; color: #1a472a;">
{{ .Site.Title }}
</h1>
<p style="text-align: center; color: #666;">
{{ .Site.Params.description }}
</p>
</header>
Jetzt kannst du es überall einfügen mit:
{{ partial "header.html" . }}
8. Einen Blog erstellen
Blog-Struktur anlegen
Erstelle einen Ordner content/blog/ und darin mehrere Artikel:content/
blog/
_index.md
mein-erster-artikel.md
hugo-ist-toll.md
tipps-und-tricks.md
Erstelle content/blog/_index.md:
---
title: "Mein Blog"
---
Hier findest du alle meine Artikel.
Erstelle content/blog/mein-erster-artikel.md:
---
title: "Mein erster Blog-Artikel"
date: 2024-01-15
tags: ["anfang", "hugo"]
---
# Hallo zusammen!
Das ist mein erster Artikel. Hugo macht echt Spaß!
## Was ich gelernt habe
- Hugo ist schnell
- Templates sind praktisch
- Markdown ist einfach
Blog-Liste erstellen
Erstelle layouts/blog/list.html um alle Artikel anzuzeigen:{{ define "main" }}
<main>
<h1>{{ .Title }}</h1>
{{ .Content }}
<h2>Alle Artikel</h2>
{{ range .Pages }}
<article style="border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;">
<h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
<p>{{ .Date.Format "02.01.2006" }}</p>
<p>{{ .Summary }}</p>
<a href="{{ .Permalink }}">Weiterlesen →</a>
</article>
{{ end }}
</main>
{{ end }}
Die {{ range .Pages }} Schleife geht durch alle Blog-Artikel!
Gehe zu: http://localhost:1313/blog - Siehst du alle deine Artikel?
9. Mehrsprachige Websites (i18n)
Hugo kann mehrere Sprachen!Lass uns Deutsch und Englisch einrichten. Öffne deine hugo.toml (oder config.toml) und füge
hinzu:
# Basis-Einstellungen
baseURL = "https://meine-website.de"
title = "Meine Website"
defaultContentLanguage = "de"
# Sprachen definieren
[languages]
[languages.de]
title = "Meine Website"
weight = 1
languageName = "Deutsch"
[languages.en]
title = "My Website"
weight = 2
languageName = "English"
# Menü für Deutsch
[[languages.de.menu.main]]
name = "Home"
url = "/"
weight = 1
[[languages.de.menu.main]]
name = "Blog"
url = "/blog"
weight = 2
# Menü für Englisch
[[languages.en.menu.main]]
name = "Home"
url = "/"
weight = 1
[[languages.en.menu.main]]
name = "Blog"
url = "/blog"
weight = 2
Inhalte in verschiedenen Sprachen
Hugo nutzt Dateinamen, um Sprachen zu unterscheiden:content/
_index.de.md (Deutsche Startseite)
_index.en.md (English Homepage)
blog/
artikel.de.md (Deutscher Artikel)
article.en.md (English Article)
Erstelle content/_index.de.md:
---
title: "Willkommen"
---
# Hallo Welt!
Das ist die deutsche Version.
Erstelle content/_index.en.md:
---
title: "Welcome"
---
# Hello World!
This is the English version.
Sprach-Umschalter hinzufügen
Füge in dein baseof.html einen Sprach-Umschalter ein:<div style="text-align: right; margin: 10px;">
{{ range .Site.Languages }}
{{ if ne .Lang $.Site.Language.Lang }}
<a href="{{ $.Permalink | relLangURL .Lang }}">
{{ .LanguageName }}
</a>
Seite 15 von 20
{{ end }}
{{ end }}
</div>
Jetzt kannst du zwischen Deutsch und Englisch wechseln!
■ Tipp: Deine URLs sehen so aus:
→ Deutsch: http://localhost:1313/de/
→ English: http://localhost:1313/en/
10. Website veröffentlichen
Die fertige Website bauen
Wenn alles fertig ist, baust du die finale Version:hugo
Hugo erstellt jetzt den public/ Ordner mit deiner fertigen Website!
■ Tipp: Mit hugo --minify wird alles extra klein gemacht (schnellere Ladezeiten!).
Wo kann ich meine Website hochladen?
Der public/ Ordner kann auf jeden Webserver hochgeladen werden. Hier einige einfache
(kostenlose!) Optionen:
Service
Perfekt für
Netlify
Anfänger - super einfach
GitHub Pages
Open Source Projekte
Vercel
Moderne Websites
Cloudflare Pages
Schnelle Performance
11. Cheat Sheet - Die wichtigsten Befehle
BefehlWas macht der?
hugo new site mysite
Neues Projekt erstellen
hugo server -D
Dev-Server starten
hugo server --debug
Server mit Debug-Infos
hugo
Finale Website bauen
hugo --minify
Website bauen + optimieren
hugo new blog/titel.md
Neuen Artikel erstellen
Wichtige Template-Variablen:
Variable
Beispiel-Ausgabe
{{ .Title }}
Mein Artikel-Titel
{{ .Content }}
Der komplette Text
{{ .Date }}
2024-01-15
{{ .Permalink }}
/blog/mein-artikel/
{{ .Site.Title }}
Meine Website
Du kannst jetzt:
✓ Hugo installieren und Projekte erstellen
✓ Die Verzeichnisstruktur verstehen
✓ Eigene Seiten und Inhalte erstellen
✓ Mit dem Dev-Server arbeiten
✓ Variablen und Templates nutzen
✓ Einen Blog aufbauen
✓ Mehrsprachige Websites erstellen
✓ Deine Website veröffentlichen
Was kommt als nächstes?
Jetzt wo du die Grundlagen kennst, kannst du:
→ Themes ausprobieren (https://themes.gohugo.io)
→ Shortcodes erstellen (wiederverwendbare Content-Blöcke)
→ Taxonomies nutzen (Tags, Kategorien)
→ Data Files verwenden (JSON, YAML, CSV)
→ Dein eigenes Theme entwickeln
■ Die offizielle Hugo-Dokumentation findest du hier
Viel Erfolg mit deinen Hugo-Projekten!
