Hugo

Dieses Tutorial beschreibt, wie ein Hugo-Blog mit GitHub als Versionskontrollsystem und DigitalOcean App Platform als Hosting-Dienst konfiguriert wird. Die Anleitung basiert auf macOS, die beschriebenen Schritte können jedoch auch unter Linux ausgeführt werden. Dafür muss Homebrew (über brew) durch sudo apt-get ersetzt werden.

Voraussetzungen

  1. macOS oder Linux: Betriebssystem.
  2. Homebrew (oder apt-get für Linux): Paketmanager. Installieren unter macOS mit:
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  3. Git: Installieren mit:
    brew install git
  4. Hugo: Installieren mit:
    brew install hugo
  5. GitHub-Konto: GitHub für Versionskontrolle.
  6. DigitalOcean-Konto: DigitalOcean für das Hosting. Es wird ein Konto mit einer Zahlungsmethode benötigt (Kosten entstehen nicht).

Schritt 1: Neues Hugo-Projekt erstellen

  1. Terminal öffnen und folgenden Befehl ausführen, um ein neues Hugo-Projekt zu erstellen:
    hugo new site example.com

Hinweis: example.com ist ein Platzhalter. Hier muss die eigene Domain eingesetzt werden.

  1. Wechsel in das Projektverzeichnis:
    cd example.com
  2. Das Theme “PaperMod” hinzufügen:
    git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo 'theme = "PaperMod"' >> config.toml
  3. Beispiel-Inhalte generieren:
    hugo new posts/welcome.md
echo "---
title: 'Willkommen'
date: $(date +%Y-%m-%dT%H:%M:%S%z)
draft: false
---
Dies ist der erste Beitrag." > content/posts/welcome.md
  4. Projekt lokal starten, um die Inhalte zu überprüfen:
    hugo server
    Der Blog ist unter http://localhost:1313 verfügbar.

Schritt 2: Projekt zu GitHub hochladen

  1. Neues Repository auf GitHub erstellen. Name: example.com.
  2. Terminal öffnen und das Projekt zu GitHub hochladen:
    git remote add origin https://github.com/<dein-benutzername>/example.com.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

Schritt 3: Deployment mit DigitalOcean App Platform

  1. DigitalOcean App Platform öffnen.
  2. Auf “Create App” klicken und GitHub als Quelle auswählen.
  3. GitHub-Zugriff gewähren und das Repository example.com auswählen.
  4. Folgende Einstellungen konfigurieren:
    • Branch: main
    • Build Command: hugo
    • Publish Directory: public
  5. Auf “Next” klicken und den kostenlosen Plan auswählen.
  6. App bereitstellen, indem auf “Deploy” geklickt wird.

Schritt 4: Domain konfigurieren

  1. Auf DigitalOcean zur App navigieren und “Settings” öffnen.
  2. Unter “Domain” auf “Add Domain” klicken und example.com eingeben.
  3. DNS-Einträge auf der Domain-Registrar-Seite anpassen:
    • Typ: CNAME
    • Name: @
    • Ziel: Die von DigitalOcean bereitgestellte Adresse.
  4. Die Änderung kann bis zu 24 Stunden dauern.

Schritt 5: Blog testen

Nach Abschluss der Konfiguration ist der Blog unter https://example.com erreichbar.

Disclaimer

Die beschriebene Konfiguration basiert auf meiner persönlichen Erfahrung und kann je nach individuellen Anforderungen variieren. Es wird empfohlen, die offizielle Dokumentation von Hugo, GitHub und DigitalOcean zu konsultieren, um detaillierte Informationen zu erhalten. Da DigitalOcean und GitHub weder europäische noch deutsche Anbieter sind, ist es im Hinblick auf die DSGVO wichtig, genau zu prüfen, welche Benutzerdaten gespeichert oder verarbeitet werden. In meinem Fall werden keinerlei Besucherdaten gespeichert oder ausgewertet, weshalb dies keine Einschränkung darstellt.