In diesem Artikel beschreibe ich den Technologie-Stack und den Entwicklungsworkflow, den ich für diese Webseite verwendet habe.
Hugo als statischer Webseiten-Generator #
Ich habe mich für Hugo entschieden, weil es:
- Blitzschnell ist - Seiten werden in Millisekunden generiert
- Einfache Markdown-Syntax bietet - perfekt für Blog-Inhalte
- Markdown-Dateien sind ideal für agentische Entwicklung - können leicht von KI-Agenten gelesen und bearbeitet werden
- Theming-System hat - ermöglicht einfache Anpassungen
- Themes als Git Submodules - können sauber als separate Git-Submodules eingebunden und gewartet werden
- Multilingual-Unterstützung bietet - ideal für meine deutsch/englische Webseite
- Keine Datenbank benötigt - alles sind statische Dateien
- Wesentlich weniger Wartungsaufwand als JavaScript-basierte Webseiten - keine ständigen Updates von JavaScript/TypeScript-Dependencies nötig
Blowfish als Hugo-Theme #
Für das Design verwende ich das Blowfish-Theme, weil es:
- Modernes, sauberes Design bietet
- Responsive ist - funktioniert auf allen Geräten
- Viele Shortcodes enthält für erweiterte Funktionen
- Dark Mode unterstützt
- Gute Dokumentation hat
- Sehr nützliche Shortcodes anbietet:
{{< mermaid >}}für das Rendering von Mermaid-Diagrammen{{< codeimporter >}}für das flexible Einbinden von Code-Snippets{{< mdimporter >}}für das flexible Einbinden von Markdown-Snippets{{< video >}}für das flexible Einbinden von Videos (lokal, URL)- …
Das Theme ist großartig… vom kleveren, agentischen Entwickler (Product Manager) Nuno Coração aus Portugal.
Zed als IDE für agentische Entwicklung #
Für die Code-Bearbeitung nutze ich Zed, eine moderne IDE, die speziell für agentische Workflows optimiert ist:
- Extrem schnell - Basierend auf Rust mit nativer Performance
- KI-Integration - Zed AI für intelligente Code-Vervollständigung
- Agentische Engineering - Unterstützung für parallele Agents
- Multi-Agent Collaboration - Parallel arbeitende Agents
- Markdown-Unterstützung - Built-in Markdown-Unterstützung für nahtlose Hugo-Integration
- CSS-Unterstützung - Built-in CSS-Unterstützung für Theme-Anpassungen
- HTML-Unterstützung - Built-in HTML-Unterstützung für Theme-Anpassungen
- YAML-Unterstützung - Built-in YAML-Unterstützung für GitHub CI/CD-Konfigurationen
- TOML-Unterstützung - TOML-Unterstützung per Extension für Hugo-Konfigurationen
- Git-Unterstützung - Zusätzlich zur sehr guten Built-in Git-Unterstützung bietet Git Firefly Syntax-Highlighting
- Github Actions - GitHub Actions Extension und GitHub Actions Snippets Extension erleichtern die Arbeit mit GitHub Actions Workflows
KI-Modelle von Mistral AI #
Ein wichtiger Teil meines Entwicklungsworkflows ist die Nutzung von Mistral AI, insbesondere mit dem extrem kostengünstigen Mistral Small Modell:
- Extrem kosteneffizient - Die gesamte KI-Nutzung für das Aufsetzen und die Migration der alten Astro-basierten Webseite hat nicht einmal 5 € gekostet (ohne Nutzung paralleler Agents und Spec-Driven Development mit OpenSpec)
- Markdown-optimiert - Ideal für die Bearbeitung von Hugo-Inhalten
- Agentische Entwicklung - Ermöglicht automatisierte Content-Erstellung und -Bearbeitung
- Mehrsprachige Unterstützung - Perfekt für meine bilingualen Inhalte
Je nach Prompting erzeugen Modelle Commit-Nachrichten wie die folgende Zwecks Nachvollziehbarkeit von erzeugtem Code.
Agent Prompts #
Wie immer in agentischen Workflows, ist die richtige Methodik entscheident: Bei kleineren und größeren Änderungen der Webseite sind klevere Prompts wie der folgende in der Regel absolut ausreichend:
Agent Skill Bibliotheken? #
Wie immer können Prompts mit Agent Skills wiederverwendbar und mit der Community, falls gewünscht, als Skill Library geteilt werden.
Hugo #
Für Hugo existieren derzeit keine öffentlichen Skill Libraries auf Github.
Blowfish-Theme #
Für das Blowfish Hugo-Theme gibt es derzeit leider ebenfalls (noch) keine Skill-Bibliothek.
Spec-Driven Development? #
Ich habe auch mit dem Spec-Driven Development Framework OpenSpec experimentiert. Recherchen (YouTube, …) nach ist OpenSpec im Vergleich zu anderen Spec-Driven Development Frameworks wie BMad Method (absoluter Overkill, im Vergleich zu OpenSpec ca. Faktor 8 schlechtere “Performance” was Implementierungsdauer und Kosten angeht) und Spec Kit (etwas komplexer und umständlicher als OpenSpec). Die Nutzung von Spec-Driven Development kann für größere Webseiten interessant sein. Für meine bisherigen Anwendungsfälle fand ich den Overhead zu groß.
GitHub für Versionierung und CI/CD #
Ich nutze GitHub sowohl für die Code-Versionierung als auch für Continuous Integration und Continuous Deployment.
Code-Versionierung #
Der gesamte Quellcode dieser Webseite wird auf GitHub versioniert:
- Kostenlos - 0 € pro Monat für Code-Versionierung
- Vollständige Historie aller Änderungen
- Branches für experimentelle Features
Continuous Integration und Deployment #
Für das automatisierte Bauen und Deployen nutze ich GitHub Actions:
Workflow #
- Code wird gepusht → GitHub Actions wird ausgelöst
- Hugo baut die Seite mit
hugo --minify - Statische Dateien werden deployt per FTPS auf meinen Hetzner-Server
Vorteile #
- Kostenlos - 0 € pro Monat für CI/CD
- Automatisch - kein manuelles Deployment nötig
- Schnell - Änderungen sind in Sekunden online
- Zuverlässig - weniger Fehler durch Automatisierung
- Versioniert - jeder Deployment steht in Beziehung zu einem Git-Commit
Hosting auf Hetzner #
Die Webseite wird auf einem Hetzner-Server gehostet:
- Europäische Infrastruktur - DSGVO-konform
- Zuverlässig - hohe Verfügbarkeit
- Extrem günstig - nur 1,90 € pro Monat
- Einfache Verwaltung über das Hetzner-Kundenportal
Fazit #
Ein extrem kosteneffizientes, effizientes, agentisches Web-Entwicklungs-Setup
Dieses Setup ermöglicht mir, mich vollständig auf die Inhalte zu konzentrieren, während die technische Infrastruktur kostengünstig, zuverlässig und wartungsarm im Hintergrund läuft. Die Kombination aus Open-Source-Tools, KI-Unterstützung und automatisierten Workflows stellt einen modernen, zukunftsweisenden Ansatz für Webentwicklung dar, der sowohl für Einzelentwickler als auch für kleine Teams ideal geeignet ist.
Technologische Vorteile #
- Hugo + Blowfish: Blitzschnelle statische Seitengenerierung mit professionellem Design und Git-Submodule-Unterstützung
- Zed IDE: Optimierte Entwicklungsumgebung mit nativer Unterstützung für alle relevanten Dateiformate (Markdown, HTML, CSS, YAML, TOML)
- Mistral AI: Kostengünstige KI-Unterstützung für agentische Workflows und Content-Erstellung
- Hetzner: DSGVO-konformes Hosting
Finanzielle Vorteile #
Einmalige Kosten:
- Gesamtkosten: Unter 10 € für Setup und Migration der gesamten Webseite
- Laufende Kosten: Nur 1,90 €/Monat für Hosting (GitHub und Hugo sind kostenlos)
- KI-Kosten: Unter 5 € für die komplette Migration von Astro zu Hugo
Laufende Kosten:
- Wartung: Minimaler Aufwand durch Vermeidung von JavaScript/TypeScript, statische Seiten und automatisiertes Deployment
Workflow-Vorteile #
- Agentische Entwicklung: KI-Agenten können direkt mit Markdown-Dateien arbeiten
- Geschwindigkeit: Mindestens 5-10x schneller als ohne agentischen Workflow
- Automatisierung: GitHub Actions automatisieren Build und Deployment vollständig
- Skalierbarkeit: Einfache Erweiterung durch Shortcodes und Theme-Anpassungen
- Zukunftssicher: Moderne Technologien mit minimalen Abhängigkeiten