Anleitung: Blogbeiträge erstellen und veröffentlichen

Für DE/EN-Zuordnung, abweichende Slugs und Tests gilt die Pflegeanleitung im Repository .

Neuen Blogbeitrag erstellen

1. Neue MDX-Datei erstellen

Deutsche Blogbeiträge befinden sich unter app/(de)/posts/<slug>/page.mdx, englische unter app/(en)/en/posts/<slug>/page.mdx. Statische Seiten liegen in content/ beziehungsweise content/en/. Um einen neuen Beitrag zu erstellen:


mkdir -p "app/(de)/posts/mein-neuer-beitrag"
touch "app/(de)/posts/mein-neuer-beitrag/page.mdx"

Benennungskonvention:

Verwenden Sie aussagekräftige Dateinamen in Kleinbuchstaben
Nutzen Sie Bindestriche (-) statt Leerzeichen
Beispiele: erste-schritte.mdx, nextjs-tutorial.mdx, 2025-01-15-neuigkeiten.mdx

2. Grundstruktur eines Beitrags

Jeder Blogbeitrag sollte mit Frontmatter beginnen, gefolgt vom eigentlichen Inhalt:


---
title: Mein erster Blogbeitrag
date: 2025-01-15
description: Eine kurze Beschreibung des Beitrags
tag: Tutorial
author: Ihr Name
---

Frontmatter-Konfiguration

Das Frontmatter enthält Metadaten über Ihren Beitrag. Es steht ganz am Anfang der Datei zwischen drei Bindestrichen (---).

Verfügbare Felder:

Feld	Pflicht	Beschreibung	Beispiel
`title`	Ja	Titel des Beitrags	`"Einführung in Next.js"`
`date`	Ja	Veröffentlichungsdatum	`2025-01-15` oder `2025/01/15`
`description`	Empfohlen	Kurze Zusammenfassung (SEO)	`"Lerne die Grundlagen von Next.js"`
`tag`	Optional	Kategorie/Tag	`"Tutorial"`, `"News"`, `"Update"`
`author`	Optional	Autor des Beitrags	`"Max Mustermann"`
`image`	Optional	Titelbild	`/images/hero.jpg`

Markdown-Syntax

Nextra unterstützt vollständiges Markdown (MDX). Hier sind die wichtigsten Elemente:

Überschriften


# H1 - Hauptüberschrift
## H2 - Unterüberschrift
### H3 - Unter-Unterüberschrift

Textformatierung


**Fettgedruckt**
*Kursiv*
~~Durchgestrichen~~
`Code inline`

Listen

Ungeordnete Liste:


- Punkt 1
- Punkt 2
  - Unterpunkt 2.1
  - Unterpunkt 2.2

Geordnete Liste:


1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

Links


[Linktext](https://example.com)
[Interner Link](/andere-seite)

Code-Blöcke

Mit Syntax-Highlighting:


```javascript
function hello() {
  console.log("Hallo Welt!");
}
```

Unterstützte Sprachen: javascript, typescript, python, bash, css, html, json, yaml, etc.

Zitate


> Dies ist ein Zitat.
> Es kann über mehrere Zeilen gehen.

Tabellen


| Spalte 1 | Spalte 2 | Spalte 3 |
|----------|----------|----------|
| Zeile 1  | Daten    | Mehr     |
| Zeile 2  | Daten    | Mehr     |

Bilder und Medien einbinden

Bilder im public-Ordner

Erstellen Sie einen public/images/-Ordner (falls nicht vorhanden):
```
mkdir -p public/images
```
Kopieren Sie Ihre Bilder in diesen Ordner
Binden Sie sie in Ihrem Beitrag ein:
```
![Bildbeschreibung](/images/mein-bild.jpg)
```

Beispiel mit verschiedenen Bildformaten:


![Screenshot der Anwendung](/images/screenshot.png)
![Diagramm](/images/diagram.svg)
![Foto](/images/photo.jpg)

Bilder mit Bildunterschrift:


![Eine schöne Landschaft](/images/landscape.jpg)
*Bildunterschrift: Die Berge im Sonnenuntergang*

Lokal testen

Bevor Sie Ihren Beitrag veröffentlichen, sollten Sie ihn lokal testen:

1. Entwicklungsserver starten


cd nextra
npm run dev

Der Server läuft dann unter: http://localhost:3000

2. Beitrag überprüfen

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000
Ihr neuer Beitrag sollte in der Übersicht erscheinen
Klicken Sie darauf, um ihn zu lesen
Überprüfen Sie:
- ✅ Formatierung ist korrekt
- ✅ Bilder werden angezeigt
- ✅ Links funktionieren
- ✅ Code-Blöcke sind lesbar

3. Server stoppen


# Drücken Sie Ctrl+C im Terminal
# Oder führen Sie aus:
pkill -f "next --turbopack"

Veröffentlichen

Produktions-Build erstellen


cd nextra
npm run build

Dies erstellt eine optimierte Version Ihres Blogs im .next/-Ordner.

Produktions-Server starten


npm run start

Der Produktions-Server läuft auf Port 3000.

Deployment

Ihr Blog läuft auf www.martuni.de . Um Änderungen zu veröffentlichen:

Stoppen Sie den laufenden Produktions-Server (falls vorhanden)
Erstellen Sie einen neuen Build:
```
npm run build
```
Starten Sie den Server neu:
```
npm run start
```

Optional: Verwenden Sie einen Process Manager wie pm2 für automatische Neustarts:


# PM2 installieren (falls nicht vorhanden)
npm install -g pm2
 
# Server mit PM2 starten
pm2 start npm --name "nextra-blog" -- start
 
# Server neustarten
pm2 restart nextra-blog
 
# Logs anzeigen
pm2 logs nextra-blog

Tipps und Best Practices

✅ Do’s

Verwenden Sie aussagekräftige Titel - Sie erscheinen in Suchmaschinen
Fügen Sie immer eine Beschreibung hinzu - Wichtig für SEO
Testen Sie lokal - Bevor Sie veröffentlichen
Verwenden Sie Bilder - Sie machen Beiträge interessanter
Strukturieren Sie Ihren Content - Mit Überschriften und Absätzen
Nutzen Sie Code-Blöcke - Für technische Inhalte

❌ Don’ts

Keine zu großen Bilder - Optimieren Sie Bilder vor dem Hochladen (max. 1-2 MB)
Keine externen Abhängigkeiten - In MDX-Dateien
Keine Leerzeichen in Dateinamen - Verwenden Sie Bindestriche
Kein fehlerhaftes Frontmatter - Überprüfen Sie die YAML-Syntax

Weiterführende Links:

Häufige Probleme und Lösungen

Problem: Beitrag erscheint nicht

Lösung:

Überprüfen Sie das Frontmatter (gültige YAML-Syntax?)
Liegt die Datei im passenden App-Router-Verzeichnis?
Endet die Datei auf .mdx?
Server neu starten

Problem: Bilder werden nicht angezeigt

Lösung:

Sind die Bilder im public/-Ordner?
Beginnt der Pfad mit /? (z.B. /images/bild.jpg)
Ist der Dateiname korrekt geschrieben?

Problem: Markdown wird nicht korrekt gerendert

Lösung:

Überprüfen Sie die Syntax
Leerzeilen zwischen Elementen einfügen
Bei Code-Blöcken: drei Backticks verwenden

Support

Bei Fragen oder Problemen:

Überprüfen Sie die Nextra-Dokumentation
Schauen Sie in die Next.js-Dokumentation

Viel Erfolg beim Bloggen! ✍️

Impressum | | Mein GitHub RSS