Créer et exécuter un projet VitePress

Qu'est-ce que VitePress?

VitePress est un générateur de sites web statiques basé sur Vite, conçu spécifiquement pour écrire de la documentation. VitePress est propulsé par Vue, offrant une vitesse de construction et une expérience de développement extrêmement rapides. Il propose une API simple et puissante, ce qui rend la création et la maintenance de la documentation très faciles.

Principales caractéristiques et avantages de VitePress

• Expérience de développement rapide: VitePress utilise Vite comme outil de build de base, offrant une mise à jour à chaud ultra-rapide et des vitesses de construction élevées.
• Configuration simple: Avec un fichier de configuration simple, les utilisateurs peuvent rapidement configurer et personnaliser leur site de documentation.
• Extension Markdown puissante: Supporte les composants Vue et des plugins Markdown personnalisés, rendant l'écriture de documentation plus flexible et puissante.
• Optimisation SEO intégrée: Génère automatiquement un plan de site et optimise la structure HTML, améliorant ainsi la convivialité pour les moteurs de recherche.
• Taille de paquet extrêmement petite: Grâce à la technique de Tree-shaking, les fichiers statiques générés sont très petits et se chargent rapidement.

Utiliser VitePress peut aider les développeurs à mettre en place rapidement un site de documentation performant.

Créer et exécuter un projet VitePress avec ServBay

Dans cet article, nous allons utiliser l'environnement Node.js fourni par ServBay pour créer et exécuter un projet VitePress. Nous utiliserons la fonctionnalité d'hébergement de ServBay pour configurer un serveur Web et accéder au projet via proxy inverse et service de fichiers statiques.

Créer un projet VitePress

1. Initialiser le projet

   Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez les commandes suivantes pour initialiser un nouveau projet VitePress :

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

   Suivez les invites pour entrer les informations du projet et choisissez les options supplémentaires si nécessaire :

    ┌  Bienvenue à VitePress!
    │
    ◇  Où VitePress doit-il initialiser la configuration?
    │  ./docs
    │
    ◇  Titre du site:
    │  Démo ServBay VitePress
    │
    ◇  Description du site:
    │  Un site démo de ServBay VitePress
    │
    ◇  Thème:
    │  Thème par défaut
    │
    ◇  Utiliser TypeScript pour les fichiers de configuration et de thème?
    │  Oui
    │
    ◇  Ajouter des scripts npm VitePress à package.json?
    │  Oui
    │
    └  Terminé! Lancez maintenant npm run docs:dev et commencez à écrire.

Modifier le contenu du projet VitePress

1. Modifier le fichier docs/index.md

   Ouvrez le fichier docs/index.md et modifiez son contenu pour que la page affiche "Hello ServBay!"

   # Hello ServBay!
   
   Bienvenue à l'utilisation de ServBay pour exécuter un site de documentation VitePress.

Passer en mode développement

1. Exécuter le serveur de développement

   Démarrez le serveur de développement et spécifiez le port (par exemple : 8585) :

   npm run docs:dev -- --port 8585

   Cela démarrera un serveur de développement local et exposera le port 8585.

2. Configurer le proxy inverse de l'hôte ServBay

   Utilisez la fonctionnalité d'hébergement de ServBay pour accéder au serveur de développement via proxy inverse. Dans les paramètres d'hébergement de ServBay, ajoutez un nouveau proxy inverse :

   • Nom: Mon premier site de dev VitePress
   • Domaine: servbay-vitepress-test.dev
   • Type d'hôte: Proxy inverse
   • IP: 127.0.0.1
   • Port: 8585

   Pour plus de détails, consultez ajouter un site web de développement Node.js.

3. Accéder au mode développement

   Ouvrez un navigateur et accédez à https://servbay-vitepress-test.dev pour voir le projet en temps réel. Grâce au support de ServBay pour les noms de domaine personnalisés et les certificats SSL gratuits, vous bénéficierez d'une sécurité accrue.

Construire la version de production

1. Construire la version de production

   Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :

   npm run docs:build

   Après la construction, les fichiers statiques générés se trouveront dans le répertoire docs/.vitepress/dist.

2. Configurer le service de fichiers statiques

   Utilisez la fonctionnalité d'hébergement de ServBay pour accéder à la version de production via service de fichiers statiques. Dans les paramètres d'hébergement de ServBay, ajoutez un nouveau site statique :

   • Nom: Mon premier site de production VitePress
   • Domaine: servbay-vitepress-test.prod
   • Type d'hôte: Statique
   • Répertoire racine du site: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Accéder au mode production

   Ouvrez un navigateur et accédez à https://servbay-vitepress-test.prod pour voir la version de production construite. Grâce au domaine personnalisé de ServBay et aux certificats SSL gratuits, votre site bénéficiera d'une sécurité et d'une crédibilité accrues.

Exécution en mode URL propre

Si votre VitePress tourne en mode URL propre (c'est-à-dire cleanUrls: true), configurez les paramètres suivants dans l'interface d'hébergement de ServBay :

• Nom: Mon premier site de production VitePress
• Domaine: servbay-vitepress-test.prod
• Configuration personnalisée: Cochez la case
• Configuration Caddy:

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

Après avoir sauvegardé, vous pouvez accéder à VitePress sans .html dans l'URL, par exemple https://servbay-vitepress-test.prod/path.

En suivant ces étapes, vous avez réussi à créer et exécuter un projet VitePress, en utilisant les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet.