Entwicklung dieser Webseite: Technologie-Stack und Workflow

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… vielen Dank an 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 Content-Bearbeitung
• Mehrsprachige Unterstützung - Perfekt für meine bilingualen oder auch multi-lingualen Inhalte. Verfassen von Posts in der Muttersprache, automatisierte Übersetzung in Fremdsprachen. Generative Engine Optimization (GEO) berücksichtigt die Aktualität der Inhalte. Werden Inhalte nicht regelmäßig aktualisiert oder nicht mehr aktuelle Inhalte entfernt, verschlechtert sich das Ranking der Webseite. Insofern ist KI

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.

Bisher habe ich keine oder keine für mich passendend Open Source Agent-Skills- Bibliotheken gefunden. Daher habe ich mir eigene Agent-Skills geschrieben. Alle Agent-Skills liegen in dem standardisierten Projekt-spezifischen Verzeichnisfpad <Projekt>/.agents/skills/. Das stellt sicher, dass Agents-Skills mit jedem Agent (z.B. Hermes Agent) und jeder IDE (nicht nur mit der von mir verwendeten Zed-IDE) funktionieren.

Hugo

#

Für Hugo existieren derzeit keine öffentlichen Skill Libraries auf Github.

Meine Hugo-spezifischen Agent-Skills liegen in <Projekt>/.agents/skills/hugo/.

Blowfish-Theme

#

Für das Blowfish Hugo-Theme gibt es derzeit leider ebenfalls (noch) keine Skill-Bibliothek.

Meine Blowfish-spezifischen Agent-Skills liegen in <Projekt>/.agents/skills/hugo-blowfish/.

Webseiten-Inhalt

#

Für die inhaltlichen Aspekte der Website habe ich mir Agent-Skills geschrieben für:

• die Erzeugung von neuen deutschen Posts -> <Projekt>/.agent/skills/post-create
• die Übersetzung von deutschen in andere Sprachen (derzeit Englisch) -> <Projekt>/.agent/skills/post-translate
• die Aktualisierung der nicht-deutschen Posts auf Basis des aktuellen Stands der deutschen Posts -> <Projekt>/.agent/skills/posts-update

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ß.

Um die Nachvollziehbarkeit der Webseiten-Änderungen ist keine Spec-Driven Development erforderlich:

Ich nutze nie von Modellen generierte Commit-Nachrichten (bzw. unterbinde die Erzeugung bereits durch entsprechende Anweisungen in der <Projekt>/AGENTS.md-Datei). Stattdessen reviewe ich alle agentischen Code-Änderungen und erstelle manuell Conventional Commits oder “Conventional Merge Request Squash Commits” (Zusammenfassung von mehreren Features, Fixes, … in einer für einen Merge Request zusammengefassten Commit-Nachricht).

Umd die technologischen Aspekte einer Webseite mit Conventoinal Commits abdecken zu können sind die gängigen Typen feat (neues/geändertes/entferntes Feature) und fix (Problembehebung) ausreichend.

Um den inhaltlichen Aspekt einer Webseite mit Conventional Commits abdecken zu können ist die Erweiterung von Conventional Commits um die Typen page (neue/geänderte/entfernte Seite) und post (neuer/geänderter/entfernter Blog-Beitrag) erforderlich.

Vielleicht werde ich noch einen Agent-Skill schreiben, der mir die Commit-Nachrichten vorbereitet ohne automatisch zu commiten. Bisher war der manuelle Mehraufwand vertretbar.

GitHub für Versionierung

#

Ich nutze GitHub für die 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 (CI), Continous Deployment (CD) und Hosting

#

KI-optimierte Webseiten müssen so schnell laden wie möglich. Die Mehrzahl meiner Webseiten-Aufrufe findet aus Ländern statt, die nicht in Deutschland und der EU liegen.

Ich möchte daher eine Content Delivery Network (CDN) basierte Lösung für das Deployment nutzen.

Mein bisheriges Hosting über Hetzner hat von dem weltweit größten, internationalen Internetknotenpunkt in Frankfurt profitiert. Hetzner bietet aber keine CDN-basierte Lösung an.

Es gibt sehr gute europäische Anbieter von CDN-Angeboten (z.b. bunny.net). Allerdings bieten Sie (bisher) für mich keine Lösung für die Integration von CI, CD und Hosting mit vertretbarem Mehraufwand.

Daher habe ich mich jetzt doch dazu entschlossen CI, CD und Hosting zu CloudFlare Pages zu migrieren.

• In meinem Fall ist das IT-Security-technisch absolut unkritisch, weil keine Secrets notwendig sind und ich die GitHub-Integration für gut halte (minimale Datenzugriffe, minimale Repository-Interaktions-Rechte).
• Datenschutz-technisch ist die Nutzung vertretbar, weil:
  • viele andere deutsche Anbieter von Webseitenhosting (z.B. Jimbo) aus einer IT-Security-Motivation heraus ganz bewusst bei CloudFlare hosten
  • und der Großteil der europäischen Internetnutzer ohnehin ohne zu Zögern über die technologisch erforderlichen hinausgehenden Cookies akzeptieren.

Workflow

#

1. Code wird in git-Repository gepusht. Es ist keine (langsame) Ausführung einer CI-Pipeline nötig.
2. CloudFlare Pages erkennt über die GitHub-Integration (bezüglich IT-Security ok) automatisch Code-Änderungen.
3. CloudFlare Pages baut bei Commits in den Branch, der für Production-Deployments definiert ist die Production-Page. Optional können zusätzlich Preview-Deployments konfiguriert und genutzt werden.

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
• CDN-basiertes Hosting - kostenloses Hosting, weltweit extrem schnelle Ladezeiten der Webseite

Wie “gut” ist die Webseite?

#

Zur Prüfung der Optimierung von Webseiten nutze ich derzeit pagespeed.web.dev. Den Hyperlinks auf der Webseite nach, scheint der Service auf Google Lighthouse zu basieren. Da Google im Suachmaschinen-Markt immer noch den größten Martanteil hält, sollte das keine schlechte Wahl sein. Insbesondere die Analyse zur agentischem Browsen (Optimierung der Webseite, für Agenten-basierte Webseitenzugriffe) ist für mich relevant.

Die Webseite hat ein sehr gutes Scoring und ist damit fast abgeschlossen.

Das aktuelle Scoring der Webseite ist hier zu finden.

Vor kurzem hatte ich die CloudFlare Agent Readiness (in beta) entdeckt. Die AI Optimierungs-Features scheinen im Mai 2026 eingeführt worden zu sein. Die Optimierungen gehen über die von PageSpeed/LightHouse berücksichtigen Empfehlungen hinaus (unter anderem):

• Auffindbarkeit:
  • robots.txt
  • sitemap.xml
  • Link Headers (RFC 8288)
• Inhalt:
  • Markdown für Agenten
• Bot Zugriffskontrolle:
  • Content Signals
  • KI-Bot-Regeln in robots.txt
  • Web Bot Auth
• Fähigkeiten:
  • Agent Skills
  • API Catalog (RFC 9727)
  • OAuth server discovery via RFC 8414 and RFC 9728
  • MCP Server Card
  • WebMCP

Die beste Auskunft zur Kompilität (inklusive Optimierungs-Empfehlungen) einer Webseite ist unter isitagentready.com einsehbar. Für statische Webseiten (wie meine) muss unter Customize Scan der Site Type = Content Site ausgewählt werden.

Das aktuelle Scoring der Webseite ist hier einzusehen.

Prompts zur Optimierung wie z.B. inklusive (zugehöriger Agent Skill) …

Goal: Publish /robots.txt with clear crawl rules

Issue: robots.txt exists but appears invalid (no User-agent directive)

Fix: Create /robots.txt at the site root with explicit User-agent directives and allow/disallow rules for key paths. Ensure it is plain text and returns 200.

Skill: https://isitagentready.com/.well-known/agent-skills/robots-txt/SKILL.md

Docs: https://www.rfc-editor.org/rfc/rfc9309

Weitere interessante Daten (Grad der Adaption von KI-Optimierungen in Webseiten, …) können in Cloudflare AI Insights eingesehen werden.

Tipp: Die Übersicht, die im Dashboard unter CloudFlare Agent Readiness angegeben wird ist irreführend.

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. Minimaler Wartungsaufwand durch Vermeidung von JavaScript/TypeScript (kaum Security-Updates nötig) und statische Webseite (extrem schmale IT-Security-Angriffläche).
• 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
• CloudFlare Pages: Gute Integration von CI, CD und Hosting. Weltweit extrem schnelle Webseiten-Ladezeiten. Statische Webseite (extrem schmale IT-Security-Angriffläche, keine Auswirkungen von Security-Vorfällen beim Hoster CloudFlare auf weitere IT-Infrastruktur) und automatisiertes Deployment. Datenschutz-technisch vertretbar.

Finanzielle Vorteile

#

Einmalige Kosten:

• Unter 10 € KI-Kosten für die komplette Migration von Astro zu Hugo
• Zeitaufwand von ca. 5h.

Laufende Kosten:

• 0 €/Monat für CI, CD und Hosting (GitHub und CloudFlare Pages sind kostenlos)
• KI-Kosten je nach Lust und Laune :)
• Zeitaufwand je nach Lust und Laune :)
• Zeitaufwand: Minimaler Aufwand durch Vermeidung von JavaScript/TypeScript (kaum Security-Updates nötig),

Workflow-Vorteile

#

• Agentische Entwicklung: KI-Agenten können direkt mit Markdown-Dateien arbeiten.
• Geschwindigkeit: Mindestens 5-10x schneller als ohne agentischen Workflow
• Automatisierung: CloudFlare basierte CI und CD.
• Skalierbarkeit: Einfache Erweiterung durch Shortcodes und Theme-Anpassungen.
• Zukunftssicher: Moderne Technologien mit minimalen Abhängigkeiten.