Webentwicklung·

Einen Headless-CMS-Blog mit Nuxt Content aufbauen

So bauen Sie einen schnellen, SEO-optimierten Blog mit Nuxt Content als Headless CMS — mit Markdown-Dateien, automatischem Routing, Volltextsuche und ohne Datenbankabhängigkeiten.

Die meisten Unternehmen brauchen kein WordPress. Sie brauchen einen Blog, der schnell lädt, gut in Suchmaschinen rankt, einfach zu pflegen ist und nicht das Management eines separaten CMS-Servers mit eigenen Sicherheitsupdates und Plugin-Ökosystem erfordert.

Nuxt Content gibt Ihnen genau das: ein dateibasiertes Content-Management-System, das Markdown-Dateien in einen vollständig gerenderten, SEO-optimierten Blog verwandelt — ohne Datenbank, ohne hackbares Admin-Panel und ohne Performance-Overhead.

Was ist Nuxt Content?

Nuxt Content ist ein Modul für das Nuxt-Framework, mit dem Sie Ihren Website-Content in Markdown-, YAML- oder JSON-Dateien schreiben können. Diese Dateien leben direkt in Ihrem Projekt-Repository, direkt neben Ihrem Code.

Beim Build parst Nuxt Content diese Dateien und stellt sie als abfragbare Daten zur Verfügung. Das Ergebnis ist eine Developer Experience, die sich wie ein Headless CMS anfühlt — mit der Einfachheit von Flat Files und der Performance einer statischen Seite.

Warum Markdown statt traditionellem CMS

Versionskontrolle: Jede Inhaltsänderung ist ein Git-Commit. Sie erhalten vollständige Historie, Diffs, Branching und die Möglichkeit, jede Änderung rückgängig zu machen.

Kein Vendor Lock-in: Ihre Inhalte sind einfache Textdateien. Sie können sie jederzeit in jedes System übertragen.

Sicherheit: Keine Datenbank bedeutet keine SQL-Injection. Kein Admin-Panel bedeutet keine Brute-Force-Login-Angriffe. Ihre Angriffsfläche ist praktisch null.

Performance: Markdown wird zur Build-Zeit geparst, nicht bei jeder Anfrage. Seiten sind vorgerendertes HTML — so schnell wie es geht.

Developer Experience: Inhalte leben im selben Repository wie der Code. Keine API-Keys, keine Webhooks zu konfigurieren, keine separate Deployment-Pipeline.

Wie Nuxt Content in der Praxis funktioniert

Content-Organisation

Blog-Posts sind Markdown-Dateien in einem content/-Verzeichnis:

content/
  blog/
    mein-erster-post.md
    workflows-automatisieren.md
    warum-nuxt-grossartig-ist.md

Frontmatter für Metadaten

Jeder Post beginnt mit YAML-Frontmatter, das seine Metadaten definiert:

---
title: "Ihr Post-Titel"
description: "Eine kurze Beschreibung für SEO und Vorschauen"
date: 2025-10-22
image:
  src: "https://example.com/image.jpg"
badge:
  label: "Webentwicklung"
---

Content abfragen

Nuxt Content bietet eine Query-API zum Abrufen, Filtern und Sortieren Ihrer Inhalte:

// Alle Posts abrufen, nach Datum sortiert
const posts = await queryCollection('posts').all()

// Einen einzelnen Post nach Pfad abrufen
const post = await queryCollection('posts').path('/blog/mein-erster-post').first()

Automatisches Rendering

Kombiniert mit Nuxts dateibasiertem Routing rendert eine einzelne [slug].vue-Seitenkomponente jeden Blog-Post — komplett mit SEO-Meta-Tags, Open-Graph-Bildern und strukturierten Daten.

SEO eingebaut

Nuxt Content gibt Ihnen alles, was Sie für Suchmaschinenoptimierung brauchen:

  • Server-Side Rendering bedeutet, dass Suchmaschinen vollständig gerendertes HTML erhalten
  • Automatische Sitemap-Generierung über das Nuxt Sitemap Modul
  • Meta-Tag-Verwaltung durch das useSeoMeta()-Composable
  • Open Graph Images dynamisch generiert mit Nuxt OG Image
  • Strukturierte Daten (JSON-LD) für erweiterte Suchergebnisse
  • Internationalisierung für mehrsprachige Inhalte

Wann Nuxt Content die richtige Wahl ist

Nuxt Content ist die richtige Wahl wenn:

  • Ihre Inhalte primär textbasiert sind (Blog-Posts, Dokumentation, Guides)
  • Sie maximale Performance mit minimaler Infrastruktur wollen
  • Ihr Content-Team mit Markdown oder Git-basiertem Workflow vertraut ist
  • Sie Mehrsprachigkeit benötigen
  • Sicherheit Priorität hat (keine Angriffsfläche)

Erwägen Sie ein traditionelles Headless CMS (Strapi, Sanity, Contentful) wenn:

  • Nicht-technische Redakteure eine visuelle Oberfläche brauchen
  • Sie komplexe Inhaltsbeziehungen haben (Taxonomien, Querverweise)
  • Echtzeit-Inhaltsupdates kritisch sind (kein Rebuild nötig)
  • Sie granulare Benutzerrollen und Berechtigungen für Content-Teams brauchen

Wie wir es nutzen

Dieser Blog ist mit Nuxt Content gebaut. Jeder Post ist eine Markdown-Datei in unserem Repository, automatisch deployed bei jedem Git-Push. Wir erhalten volle SEO-Optimierung, mehrsprachige Unterstützung (Englisch und Deutsch) und einen Blog, der in unter einer Sekunde lädt — ohne Infrastruktur-Management jenseits unseres Hostings.

Für Kundenprojekte kombinieren wir Nuxt Content oft mit:

  • Nuxt UI für vorgefertigte, barrierefreie Komponenten
  • Nuxt Image für automatische Bildoptimierung
  • Nuxt I18n für mehrsprachige Inhalte
  • Nuxt OG Image für dynamische Social-Media-Bilder

Dieser Stack liefert einen professionellen, schnellen und wartbaren Blog oder eine Dokumentationsseite in einem Bruchteil der Zeit (und Kosten) eines traditionellen CMS-Setups.

Denken Sie über einen Blog oder eine Dokumentationsseite nach? Lassen Sie es uns wissen — wir können Sie schneller zum Laufen bringen, als Sie erwarten.