GitHub Pages mit Hugo: Der komplette Guide

GitHub Pages ist eine fantastische Möglichkeit, statische Websites kostenlos zu hosten. In Kombination mit Hugo können Sie schnell professionelle Websites erstellen.

🎯 Was Sie benötigen

  • Ein GitHub-Account
  • Hugo auf Ihrem lokalen Computer
  • Grundkenntnisse in Git
  • Ein Texteditor Ihrer Wahl

🚀 Schritt-für-Schritt Anleitung

1. Hugo-Projekt erstellen

# Neues Hugo-Projekt erstellen
hugo new site meine-website
cd meine-website

# Git Repository initialisieren
git init

2. Theme hinzufügen

# Theme als Submodule hinzufügen
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# Theme in Konfiguration setzen
echo 'theme = "PaperMod"' >> hugo.toml

3. GitHub Actions Workflow

Erstellen Sie .github/workflows/deploy.yml:

name: Deploy Hugo site to GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

4. GitHub Repository konfigurieren

  1. Erstellen Sie ein neues Repository auf GitHub
  2. Pushen Sie Ihren Code:
git remote add origin https://github.com/USERNAME/REPO-NAME.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main
  1. Aktivieren Sie GitHub Pages:
    • Gehen Sie zu Settings → Pages
    • Wählen Sie “GitHub Actions” als Source

⚙️ Hugo-Konfiguration optimieren

Basis-Konfiguration

baseURL = 'https://username.github.io/repository-name/'
languageCode = 'de-de'
title = 'Meine Website'
theme = 'PaperMod'

enableRobotsTXT = true
enableEmoji = true

[params]
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true
  ShowBreadCrumbs = true
  ShowCodeCopyButtons = true

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 10
  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 20

🎨 Anpassungen und Styling

Custom CSS hinzufügen

  1. Erstellen Sie assets/css/custom.css
  2. Fügen Sie layouts/partials/extend_head.html hinzu:
<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">

📝 Content erstellen

Neue Posts

hugo new content posts/mein-post.md

🔧 Erweiterte Features

Kommentare hinzufügen

Integrieren Sie Kommentarsysteme wie:

  • Disqus
  • Utterances (GitHub Issues)
  • Giscus (GitHub Discussions)