VitePress-Anleitung: Von der Installation bis zur Bereitstellung

Einführung in VitePress

VitePress ist ein statischer Seitengenerator (SSG), der auf Vite und Vue 3 basiert. Er konvertiert Markdown-Dateien in statische HTML-Dateien und ermöglicht es Ihnen, schnell eine Website zu erstellen.

VitePress wird häufig für Dokumentationsseiten verwendet. Zum Beispiel sind die offiziellen Dokumentationen für Vue.js und Vite beide mit VitePress erstellt.

Neben Dokumentationen verwenden viele Leute VitePress auch, um persönliche Blogs zu erstellen. Da es Markdown-Dateien in Webseiten umwandelt, können Sie sich auf die Inhaltserstellung konzentrieren, ohne sich zu viele Gedanken über technische Details machen zu müssen.

Wie unterscheidet es sich von VuePress?

Obwohl nur ein Buchstabe Unterschied in ihren Namen besteht, sind VuePress und VitePress ziemlich unterschiedlich.

VuePress war ein früherer statischer Seitengenerator, der vom Vue-Team veröffentlicht wurde und speziell für Vue 2.x entwickelt wurde. Im Gegensatz dazu ist VitePress speziell für Vue 3.x maßgeschneidert.

Da Vue 3 zum Mainstream geworden ist, wird es nun empfohlen, die neueste Version von VitePress zu verwenden, um von einem aktiveren Ökosystem und Community-Support zu profitieren.

Schnelleinstieg

Führen Sie die folgenden Befehle der Reihe nach aus, um ein neues VitePress-Projekt zu erstellen:

# Erstellen Sie einen neuen Projektordner und wechseln Sie hinein
mkdir vitepress-blog && cd vitepress-blog

# VitePress hinzufügen
npm add -D vitepress@next

# Starten Sie den Initialisierungsassistenten
npx vitepress init

Nachdem Sie die obigen Befehle ausgeführt haben, führt Sie VitePress durch die grundlegende Konfiguration mit einer Reihe von Fragen, wie z. B. dem Speicherort Ihrer Inhalte, dem Website-Titel und dem Thema. Für Anfänger können Sie einfach Enter drücken, um die Standardoptionen für alle Fragen zu akzeptieren.

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Where should VitePress look for your markdown files?
│  ./
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run npm run docs:dev and start writing.

Sobald der Assistent abgeschlossen ist, ist Ihr Projekt initialisiert. Die Projektverzeichnisstruktur sollte ungefähr so aussehen:

.
├── .vitepress
│   └── config.mts  # VitePress Konfigurationsdatei
├── api-examples.md
├── markdown-examples.md
├── index.md      # Website-Homepage
└── package.json

Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run docs:dev

Besuchen Sie http://localhost:5173 in Ihrem Browser, und Sie sehen Ihre VitePress-Website.

Hinzufügen Ihres ersten Beitrags

Erstellen Sie eine neue Markdown-Datei im Stammverzeichnis, z. B. my-first-post.md. Schreiben Sie einige Inhalte hinein:

---
title: Mein erster Beitrag
date: 2025-09-21
---

# Hallo, VitePress!

Dies ist der erste Beitrag auf meinem persönlichen Blog.

@Erstellt mit VitePress

Nachdem Sie den Beitrag geschrieben haben, werden Sie feststellen, dass er auf Ihrer Website nicht erscheint. Das liegt daran, dass VitePress die Dateiänderungen nicht automatisch erkennt, um die Navigation zu aktualisieren. Sie müssen die Konfigurationsdatei manuell aktualisieren, um den Beitrag zu VitePress hinzuzufügen.

Öffnen Sie die Datei .vitepress/config.mts, suchen Sie die sidebar-Konfigurationsoption und fügen Sie Ihren neuen Beitrag hinzu:

import { defineConfig } from 'vitepress';

export default defineConfig({
  // ... andere Konfigurationen
  themeConfig: {
    // ... andere Themenkonfigurationen
    sidebar: [
      {
        text: 'Meine Beiträge',
        items: [{ text: 'Mein erster Beitrag', link: '/my-first-post' }],
      },
    ],
  },
});

Nach dem Speichern der Datei aktualisieren Sie die Browserseite. Sie sehen den Link zu Ihrem Beitrag in der Seitenleiste. Klicken Sie darauf, um Ihren neuen Beitrag anzuzeigen.

Gibt es eine Möglichkeit, die Seitenleiste automatisch zu aktualisieren?

Das manuelle Aktualisieren der Seitenleiste bei jeder Erstellung eines neuen Beitrags kann mühsam sein. Derzeit gibt es jedoch keine integrierte Automatisierungslösung, die vom offiziellen Team bereitgestellt wird.

Sie können Community-Plugins verwenden, um dieses Problem zu lösen, wie z. B. VitePress Sidebar.

Wie modifiziere ich die Homepage?

Die Standard-Homepage befindet sich unter index.md. Ihr Inhalt sieht jedoch ziemlich seltsam aus: Er scheint nur aus einer Reihe von Konfigurationen zu bestehen, ohne Markdown oder HTML.

Wie wird ein Konfigurationsblock zu einer ganzen Webseite?

Die Homepage wird tatsächlich vom VitePress-Thema generiert. Die Website, die wir mit der Standardkonfiguration erstellt haben, enthält ebenfalls ein Thema.

Wenn Sie layout: home im Frontmatter (dem Konfigurationsbereich am Anfang der Datei) von index.md angeben, verwendet VitePress die integrierte Homepage-Vorlage des Themas, um die Seite zu rendern. Der Titel, die Schlagzeile, die Schaltflächen und andere von der Vorlage benötigte Inhalte stammen alle aus den Feldern hero, actions und anderen Feldern, die Sie in index.md konfigurieren.

Der direkteste Weg, den Stil der Homepage zu ändern, ist die Änderung oder Anpassung des Themas der Website.

Sie können die Homepage entweder komplett umschreiben oder ein von der Community bereitgestelltes Thema verwenden. Viele Community-Themen finden Sie in „Awesome Lists“ wie Awesome VitePress.

Wie bereichere ich meinen Blog weiter?

Sobald das Grundgerüst eingerichtet ist, können Sie weiter lernen, um Ihren Blog auf folgende Weise reichhaltiger und persönlicher zu gestalten:

Vue.js lernen: Durch das Erlernen von Vue können Sie benutzerdefinierte Komponenten innerhalb Ihrer Markdown-Dateien erstellen, um Ihre Webinhalte anzureichern, wie z. B. Diagramme, Karussells oder sogar komplexere Anwendungen.
Eintauchen in die VitePress-Dokumentation: Nehmen Sie sich Zeit, die offizielle Dokumentation zu lesen, um zu lernen, wie Sie die Navigationsleiste, das Footer, die Internationalisierung (i18n) konfigurieren und wie Sie die integrierten Markdown-Erweiterungen voll nutzen können.
Community-Themen und Plugins erkunden: Durch die Verwendung von Themen und Plugins, die von Community-Entwicklern beigetragen wurden, wie z. B. in Awesome VitePress, können Sie Ihrem Blog schnell erweiterte Funktionen und Stile hinzufügen.

Bereitstellung Ihrer VitePress-Website

Nun, da Ihr Blog eingerichtet ist, ist es an der Zeit, ihn online bereitzustellen, damit Sie ihn mit Freunden und der Welt teilen können.

Es wird empfohlen, Leapcell für die Bereitstellung zu verwenden.

Leapcell ist eine Web-App-Hosting-Plattform, die eine extrem einfache und benutzerfreundliche Oberfläche bietet, mit der Sie Ihre VitePress-Website in nur wenigen einfachen Schritten online bereitstellen können.

Darüber hinaus verfügt Leapcell über eine integrierte Traffic-Analytics-Funktion, die es sehr praktisch macht, die Zugriffsinformationen Ihrer Website, wie z. B. Besuchshäufigkeit und Benutzerquellen, anzuzeigen und Ihnen so hilft, Ihre Leser besser zu verstehen.

Spezifische Bereitstellungsschritte

Erstellen Sie im Stammverzeichnis des Projekts eine Datei namens Caddyfile mit dem folgenden Inhalt:

:8080 {
  root * ./.vitepress/dist
  file_server
}

Committen Sie Ihr Projekt auf GitHub. Sie können sich für die Schritte auf die offizielle Dokumentation von GitHub beziehen. Leapcell wird den Code später aus Ihrem GitHub-Repository ziehen.
Klicken Sie auf der Leapcell-Seite auf „Service erstellen“.

Wählen Sie „nodejs20“ als Runtime und füllen Sie diese Bereitstellungsfelder aus:

Build-Befehl:

apt update && apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list
chmod o+r /usr/share/keyrings/caddy-stable-archive-keyring.gpg
chmod o+r /etc/apt/sources.list.d/caddy-stable.list
apt update && apt install -y caddy

npm install && npm run docs:build

Start-Befehl:

caddy run

Port: 8080

Klicken Sie unten auf „Senden“, um die Bereitstellung zu starten. Die Bereitstellung wird schnell abgeschlossen und Sie zurück zur Startseite der Bereitstellung geleitet. Hier sehen wir, dass Leapcell eine Domain bereitgestellt hat. Dies ist die Online-Adresse Ihres Blogs.