Neue Seiten in VitePress hinzufuegen

Anleitung zum Erstellen neuer Seiten und zum Organisieren der Sidebar-Navigation in VitePress.

Neue Seite erstellen

1. Markdown-Datei anlegen

Erstelle eine neue .md-Datei im gewuenschten Verzeichnis, z.B. docs/guide/:

# Neue Datei erstellen
docs/guide/meine-neue-seite.md

2. Inhalt schreiben

Jede Seite beginnt mit einem Titel als H1-Ueberschrift:

# Titel der Seite

Hier steht der Inhalt der Seite.

## Unterueberschrift

Weiterer Text.

Optional kann Frontmatter fuer Metadaten hinzugefuegt werden:

---
title: Meine Seite
description: Beschreibung fuer Suchmaschinen
---

# Meine Seite

Inhalt...

3. Seite in der Sidebar eintragen

Die Datei existiert jetzt, ist aber noch nicht in der Navigation sichtbar. Dafuer muss sie in docs/.vitepress/config.mts eingetragen werden:

sidebar: [
  {
    text: 'Guide',
    items: [
      { text: 'Einleitung', link: '/guide/' },
      { text: 'Meine neue Seite', link: '/guide/meine-neue-seite' }, 
    ],
  },
],

Wichtig

Ohne Eintrag in der Sidebar erscheint die Seite nicht in der Navigation. Die Seite ist zwar ueber die direkte URL erreichbar, aber nicht auffindbar.

Sidebar-Sektionen erstellen

Die Sidebar kann in mehrere Gruppen unterteilt werden. Jede Gruppe hat einen Titel und eine Liste von Seiten.

Beispiel: Mehrere Sektionen

sidebar: [
  {
    text: 'Guide',
    items: [
      { text: 'Einleitung', link: '/guide/' },
      { text: 'Erste Schritte', link: '/guide/getting-started' },
    ],
  },
  {
    text: 'Coolify Tutorials',
    items: [
      { text: 'VitePress deployen', link: '/guide/vitepress-coolify-deployment' },
      { text: 'Hugo Blog deployen', link: '/guide/hugo-blog-coolify-deployment' },
    ],
  },
],

Das erzeugt zwei getrennte Bereiche in der linken Spalte mit jeweils eigener Ueberschrift.

Einklappbare Sektionen

Sektionen koennen einklappbar gemacht werden mit collapsed:

{
  text: 'Coolify Tutorials',
  collapsed: false, // false = offen, true = zugeklappt
  items: [
    { text: 'VitePress deployen', link: '/guide/vitepress-coolify-deployment' },
  ],
},

Unterverzeichnisse verwenden

Fuer groessere Dokumentationen koennen Seiten in Unterordnern organisiert werden:

docs/
├── guide/
│   ├── index.md
│   └── getting-started.md
├── tutorials/
│   ├── tutorial-eins.md
│   └── tutorial-zwei.md

Die Links in der Sidebar passen sich entsprechend an:

sidebar: [
  {
    text: 'Tutorials',
    items: [
      { text: 'Tutorial Eins', link: '/tutorials/tutorial-eins' },
      { text: 'Tutorial Zwei', link: '/tutorials/tutorial-zwei' },
    ],
  },
],

Zusammenfassung

Fuer jede neue Seite sind zwei Schritte noetig:

1. Markdown-Datei erstellen im passenden Verzeichnis
2. Sidebar-Eintrag hinzufuegen in docs/.vitepress/config.mts

Danach committen und pushen — Coolify deployed automatisch.