Erstellen und Ausführen eines VitePress-Projekts

Was ist VitePress?

VitePress ist ein statischer Website-Generator, der auf Vite aufbaut und speziell für das Verfassen von Dokumentationen entwickelt wurde. VitePress wird von Vue angetrieben und bietet sehr schnelle Build-Geschwindigkeiten sowie ein hervorragendes Entwicklungserlebnis. Es stellt eine einfache und leistungsstarke API zur Verfügung, wodurch das Erstellen und Warten von Dokumentationen sehr einfach wird.

Hauptmerkmale und Vorteile von VitePress

• Schnelles Entwicklungserlebnis: VitePress verwendet Vite als Build-Tool und bietet extrem schnelle Hot-Reloading- und Build-Geschwindigkeiten.
• Einfache Konfiguration: Benutzer können ihre Dokumentationswebsite schnell mit einer simplen Konfigurationsdatei einrichten und anpassen.
• Leistungsstarke Markdown-Erweiterungen: Unterstützung für Vue-Komponenten und benutzerdefinierte Markdown-Plugins machen das Schreiben von Dokumentationen flexibel und kraftvoll.
• Integrierte SEO-Optimierung: Automatisch generierte Sitemaps und eine optimierte HTML-Struktur verbessern die Suchmaschinenfreundlichkeit.
• Extrem kleine Paketgröße: Durch Tree-shaking-Techniken sind die generierten statischen Dateien sehr klein und laden schneller.

Mit VitePress können Entwickler schnell leistungsstarke Dokumentationswebsites erstellen.

Erstellen und Ausführen eines VitePress-Projekts mit ServBay

In diesem Artikel werden wir die von ServBay bereitgestellte Node.js-Umgebung nutzen, um ein VitePress-Projekt zu erstellen und auszuführen. Wir werden die 'Host'-Funktion von ServBay verwenden, um den Webserver einzurichten, und über Reverse Proxy und statischen Dateidienst auf das Projekt zugreifen.

Erstellen eines VitePress-Projekts

1. Initialisieren des Projekts

   Stellen Sie zunächst sicher, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Verwenden Sie dann die folgenden Befehle, um ein neues VitePress-Projekt zu initialisieren:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   Geben Sie die Projektinformationen ein und wählen Sie gegebenenfalls andere Optionen:

    ┌  Willkommen bei VitePress!
    │
    ◇  Wo soll VitePress die Konfiguration initialisieren?
    │  ./docs
    │
    ◇  Seitentitel:
    │  ServBay VitePress Demo
    │
    ◇  Seitenbeschreibung:
    │  Eine ServBay VitePress Demo-Seite
    │
    ◇  Theme:
    │  Standard-Theme
    │
    ◇  TypeScript für Konfigurations- und Themendateien verwenden?
    │  Ja
    │
    ◇  VitePress npm-Skripte zu package.json hinzufügen?
    │  Ja
    │
    └  Fertig! Führen Sie jetzt npm run docs:dev aus und beginnen Sie mit dem Schreiben.

Ändern des Inhalts des VitePress-Projekts

1. Ändern der docs/index.md Datei

   Öffnen Sie die docs/index.md Datei und ändern Sie den Inhalt, damit die Webseite "Hello ServBay!" anzeigt:

   # Hello ServBay!
   
   Willkommen bei der Verwendung von ServBay, um eine VitePress-Dokumentationsseite auszuführen.

Übergang in den Entwicklungsmodus

1. Entwicklungsserver starten

   Starten Sie den Entwicklungsserver und geben Sie den Port an (z.B. 8585):

   npm run docs:dev -- --port 8585

   Dies startet einen lokalen Entwicklungsserver und öffnet den Port 8585.

2. Konfigurieren des Reverse Proxy auf ServBay

   Verwenden Sie die 'Host'-Funktion von ServBay, um über einen Reverse Proxy auf den Entwicklungsserver zuzugreifen. In den 'Host'-Einstellungen von ServBay fügen Sie einen neuen Reverse Proxy hinzu:

   • Name: My first VitePress dev site
   • Domain: servbay-vitepress-test.dev
   • Host-Typ: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Weitere Details zum Einrichten finden Sie unter Hinzufügen einer Nodejs-Entwicklungsseite.

3. Auf den Entwicklungsmodus zugreifen

   Öffnen Sie Ihren Browser und besuchen Sie https://servbay-vitepress-test.dev, um das Projekt in Echtzeit zu sehen. Da ServBay benutzerdefinierte Domains und kostenlose SSL-Zertifikate unterstützt, genießen Sie mehr Sicherheit.

Erstellen einer Produktionsversion

1. Erstellen der Produktionsversion

   Wenn die Entwicklung abgeschlossen ist, verwenden Sie den folgenden Befehl, um eine Produktionsversion zu erstellen:

   npm run docs:build

   Nach Abschluss des Builds befinden sich die generierten statischen Dateien im docs/.vitepress/dist Verzeichnis.

2. Einrichten des statischen Dateidienstes

   Verwenden Sie die 'Host'-Funktion von ServBay, um über den statischen Dateidienst auf die Produktionsversion zuzugreifen. In den 'Host'-Einstellungen von ServBay fügen Sie eine neue statische Website hinzu:

   • Name: My first VitePress production site
   • Domain: servbay-vitepress-test.prod
   • Host-Typ: Static
   • Website-Root-Verzeichnis: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Zugriff auf den Produktionsmodus

   Öffnen Sie Ihren Browser und besuchen Sie https://servbay-vitepress-test.prod, um die erstellte Produktionsversion zu sehen. Dank der benutzerdefinierten Domains und kostenlosen SSL-Zertifikate von ServBay wird Ihre Website sicherer und vertrauenswürdiger.

Ausführen im Clean URL-Modus

Wenn Ihr VitePress im Clean URL-Modus ausgeführt wird (d.h. cleanUrls: true), nehmen Sie bei ServBay folgende Einstellungen vor:

• Name: My first VitePress production site
• Domain: servbay-vitepress-test.prod
• Benutzerdefinierte Konfiguration: Ausgewählt
• Caddy-Konfiguration:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

Nach dem Speichern können Sie auf VitePress ohne .html am Ende zugreifen. Beispielsweise https://servbay-vitepress-test.prod/path.

Durch die obigen Schritte haben Sie erfolgreich ein VitePress-Projekt erstellt und ausgeführt und die Funktionen von ServBay genutzt, um Ihr Projekt zu verwalten und darauf zuzugreifen.