Hugo Blog mit Vercel deployen

1. Erstellen der Hugo App

Als erstes erstellen wir ein neues Hugo Projekt mit dem Befehl hugo new site <Projektname> -f yml.

Anschließend wechseln wir in den neu erstellten Ordner cd <Projektname>.

2. Erstellen des ersten Beitrags

Mit hugo new posts/my-first-post.mderstellen wir den ersten Post im Ordner content/posts. Setze draft im Header der Datei content/posts/my-first-post.md auf false, damit der Artikel auf der Webseite angezeigt wird.

3. Hinzufügen des Themes

Füge ein beliebiges Theme als Submodul hinzu. Ich habe mich für PaperMod entschieden:

git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Hier kann auch gleich noch ein GitHub Repository initialisiert werden:

echo "# hugoblog" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Account/Name.git # Change Account and Name
git push -u origin main

4. Anpassen der Konfiguration

Lösche die originale Konfigurationsdatei mit dem Befehl rm hugo.tomlund erstelle eine mit nano config.yaml.

Ich hab die Konfigurationsdatei config.yaml dann wie folgt bearbeitet:

baseURL: "https://sergiolaubner.de/"
languageCode: de-de
title: Sergios Blog
theme: PaperMod
enableEmoji: true
paginate: 5

params:
  profileMode:
    enabled: true
    title: "Hey, ich bin Sergio 👋" # optional default will be site title
    subtitle: "Ich studiere digitale Forensik und interessiere mich neben der IT-Sicherheit für Webentwicklung."
    buttons:
      - name: Blog
        url: "/posts"
      - name: Now Page
        url: "/now"

  ShowBreadCrumbs: true
  ShowToc: true
  TocOpen: false
  ShowPostNavLinks: true
  ShowReadingTime: true
  ShowCodeCopyButtons: true
  paginate: true
  paginatePath: "page"
  enableRobotsTXT: true

menu:
  main:
    - identifier: home
      name: Home
      url: /
      weight: 10
    - identifier: now
      name: Now
      url: /now/
      weight: 10
    - identifier: posts
      name: Blog
      url: /posts/
      weight: 20
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 30

5. Lokaler Test der Webseite

Starte die Hugo-Entwicklungsumgebung: hugo server Anschließend können wir die Webseite über http://localhost:1313 aufrufen

6. Deployment auf Vercel

Erstelle im Root-Verzeichnis der Hugo App eine vercel.json-Datei: nano vercel.json Danach die folgende Konfiguration einfügen:

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.139.2"
    }
  }
}

Ich habe immer wieder Fehlermeldungen bei Vercel bekommen und erst nach vielen Austesten die Lösung mit dieser Konfigurationsdatei gefunden. Die manuelle Konfiguration bei den Build & Development Settings bei Vercel für die HUGO_VERSION hatte bei mir nicht funktioniert. Ich habe die restlichen Einstellungen bei Vercel leer gelassen und nur das Framework auf Hugo umgestellt

Fertig! 🎉

Viel Spaß mit der Webseite!