Markdown für Blog-Posts — Schreiben in Markdown für CMS und Static Sites
Immer mehr Blog-Plattformen und CMS-Systeme unterstützen Markdown als primäres Schreibformat. Von Ghost über Hugo bis zu Next.js MDX — Markdown ist das Rückgrat des modernen Content-Schreibens für technisch affine Autoren. Der WikiPlus Markdown-Vorschau-Tool ist das ideale Begleittool: Schnell testen, wie der geschriebene Markdown gerendert wird, bevor er ins CMS eingepflegt wird.
Welche Plattformen Markdown unterstützen
Markdown ist inzwischen in einer Vielzahl von Schreibumgebungen verfügbar. Static-Site-Generatoren: Hugo (Go-basiert, sehr schnell), Jekyll (Ruby, GitHub Pages Standard), Astro (JavaScript, moderner Standard), Gatsby (React, GraphQL), Eleventy (JavaScript, flexibel). Alle verwenden Markdown-Dateien als Content-Quelle, die dann zu statischen HTML-Seiten gerendert werden. Headless CMS mit Markdown-Support: Contentful (Rich-Text und Markdown), Sanity.io (Portable Text, kann Markdown), Strapi (Markdown-Felder), Netlify CMS / Decap CMS (Markdown-Files in Git). CMS mit optionalem Markdown: Ghost (primär Markdown), WordPress (mit Markdown-Plugin), Notion (Markdown-ähnliche Syntax), Confluence (Markdown-Modus). Blogging-Plattformen: dev.to (Markdown-Editor), Hashnode (Markdown), Medium (begrenzt). Für Entwickler-Blogs ist Hugo oder Astro mit Markdown-Content die modernste und performanteste Lösung.
MDX: Markdown mit React-Komponenten kombinieren
MDX (Markdown + JSX) ist eine Erweiterung von Markdown, die es erlaubt, React-Komponenten direkt in Markdown-Dateien zu verwenden. Das öffnet völlig neue Möglichkeiten für interaktive Blog-Posts und Dokumentation. In MDX: ## Standard-Markdown-Überschrift Normaler Markdown-Text. <InteractiveChart data={chartData} />. Weitere Markdown-Inhalte. So kann man interaktive Visualisierungen, Code-Playgrounds und benutzerdefinierte UI-Elemente direkt in Blog-Posts einbetten, ohne reines HTML zu schreiben. MDX wird von Next.js (mit @next/mdx), Astro, Docusaurus und anderen Frameworks nativ unterstützt. Für den WikiPlus Markdown-Vorschau-Tool: Standard-Markdown (ohne JSX-Komponenten) wird vollständig gerendert. JSX-Teile werden als Code-Block angezeigt — für die Entwicklung von MDX-Content ist ein Framework-spezifischer Lokal-Preview bevorzugt.
Frontmatter: Metadaten für Blog-Posts in Markdown
Viele Static-Site-Generatoren und Headless CMS verwenden Frontmatter — einen YAML-Block am Anfang einer Markdown-Datei — für Metadaten des Blog-Posts. Format: --- title: 'Mein Blog-Post' date: 2026-05-12 author: Max Mustermann tags: [seo, markdown, webdesign] description: Kurze Beschreibung des Posts. draft: false ---. Der eigentliche Markdown-Inhalt folgt nach dem ---. Frontmatter-Daten werden vom Site-Generator ausgelesen und für: URL-Generierung aus dem title oder einem expliziten slug-Feld, Sortierung und Filterung (nach date), Tag-Seiten-Generierung, Meta-Tags-Erstellung (description für SEO), Autoren-Zuordnung genutzt. Verschiedene Generatoren haben leicht unterschiedliche Frontmatter-Konventionen — prüfe die Dokumentation des jeweiligen Generators. Der WikiPlus Markdown-Vorschau-Tool rendert den Inhalt nach dem Frontmatter, ignoriert aber das Frontmatter selbst — gib nur den Markdown-Content ohne YAML-Block ein für korrekte Vorschau.
Markdown-Workflow: Von der Idee zur veröffentlichten Seite
Ein effizienter Workflow für Markdown-basiertes Bloggen: Schritt 1 — Idee und Outline: Grobe Struktur der Überschriften im Markdown erstellen. H2 für Hauptabschnitte, H3 für Unterabschnitte. Schritt 2 — Erster Entwurf: In einem beliebigen Texteditor (Obsidian, VS Code, iA Writer, Typora) den Fließtext schreiben. Schritt 3 — Vorschau prüfen: Den Text in den WikiPlus Markdown-Vorschau-Tool kopieren und die gerenderte Version überprüfen. Sind alle Code-Blöcke korrekt? Sind Tabellen richtig? Schritt 4 — Bilder hinzufügen: Bilder in den Assets-Ordner des Projekts oder CDN hochladen, dann die Markdown-Bild-Syntax verwenden. Schritt 5 — SEO-Check: Meta-Description im Frontmatter ergänzen. Alt-Texte für alle Bilder. Interne Links zu anderen Posts. Schritt 6 — Lokal bauen: Mit hugo server oder astro dev den Post lokal testen. Schritt 7 — Deploy: Mit git push automatisches Deployment auslösen (Netlify, Vercel, GitHub Pages). Der WikiPlus Markdown-Vorschau-Tool deckt Schritt 3 effizient ab.
Häufig gestellte Fragen
- Welcher Markdown-Editor ist für Blog-Schreiber empfehlenswert?
- Obsidian (Desktop, kostenlos) für lokales Schreiben mit Vorschau. Typora (kostenpflichtig) für WYSIWYG-Markdown. iA Writer für ablenkungsfreies Schreiben. VS Code mit Markdown Preview Extension für Entwickler. Online: Der WikiPlus Markdown-Vorschau-Tool für schnelle Tests ohne Installation.
- Kann ich Markdown für E-Commerce-Produktbeschreibungen verwenden?
- Das hängt vom E-Commerce-System ab. Shopify, WooCommerce und andere unterstützen HTML in Produktbeschreibungen, nicht direkt Markdown. Markdown kann lokal geschrieben und dann zu HTML konvertiert werden (mit dem WikiPlus Tool oder einem Konverter wie Pandoc), das dann ins CMS eingefügt wird.
- Wie binde ich externe Bilder in Markdown ein?
- Mit der Standard-Syntax: . Die URL muss öffentlich zugänglich sein. Für eigene Bilder: Im Asset-Ordner des Projekts speichern und relativen Pfad verwenden: . Immer beschreibende Alt-Texte für Barrierefreiheit und SEO.