Creare ed Eseguire un Progetto con VitePress

Cos'è VitePress?

VitePress è un generatore di siti statici basato su Vite, progettato specificamente per la scrittura di documentazione. VitePress è alimentato da Vue e offre una velocità di costruzione e un'esperienza di sviluppo estremamente rapide. Fornisce un'API semplice ma potente, rendendo facile la creazione e la manutenzione della documentazione.

Caratteristiche e Vantaggi Principali di VitePress

• Esperienza di sviluppo veloce: VitePress utilizza Vite come strumento di costruzione sottostante, offrendo aggiornamenti caldi e velocità di costruzione rapidissime.
• Configurazione semplice: Con un file di configurazione semplice, gli utenti possono configurare e personalizzare rapidamente il proprio sito di documentazione.
• Estensioni Markdown potenti: Supporta componenti Vue e plugin Markdown personalizzati, rendendo la scrittura della documentazione più flessibile e potente.
• SEO ottimizzato integrato: Generazione automatica di sitemap e struttura HTML ottimizzata, migliorando l'amicizia con i motori di ricerca.
• Dimensioni del pacchetto molto piccole: Utilizzando la tecnica del Tree-shaking, i file statici generati sono molto piccoli e il tempo di caricamento è rapido.

Con VitePress, i sviluppatori possono creare rapidamente siti di documentazione ad alte prestazioni.

Creare ed Eseguire un Progetto VitePress con ServBay

In questo articolo, utilizzeremo l'ambiente Node.js fornito da ServBay per creare ed eseguire un progetto VitePress. Utilizzeremo la funzionalità 'Host' di ServBay per configurare un server web e implementare l'accesso al progetto tramite proxy inverso e servizio di file statici.

Creare un Progetto VitePress

1. Inizializzare il Progetto

   Innanzitutto, assicurati di aver installato l'ambiente Node.js fornito da ServBay. Quindi, utilizza i seguenti comandi per inizializzare un nuovo progetto VitePress:

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

   Inserisci le informazioni del progetto come richiesto e scegli altre opzioni secondo necessità:

    ┌  Welcome to VitePress!
    │
    ◇  Where should VitePress initialize the config?
    │  ./docs
    │
    ◇  Site title:
    │  ServBay VitePress Demo
    │
    ◇  Site description:
    │  A ServBay VitePress Demo Site
    │
    ◇  Theme:
    │  Default Theme
    │
    ◇  Use TypeScript for config and theme files?
    │  Yes
    │
    ◇  Add VitePress npm scripts to package.json?
    │  Yes
    │
    └  Done! Now run npm run docs:dev and start writing.

Modificare il Contenuto del Progetto VitePress

1. Modificare il file docs/index.md

   Apri il file docs/index.md e modifica il contenuto per far sì che la pagina web stampi "Hello ServBay!"

   # Hello ServBay!
   
   Benvenuto nell'utilizzo di ServBay per eseguire il sito di documentazione VitePress.

Entrare in Modalità Sviluppo

1. Eseguire il Server di Sviluppo

   Avvia il server di sviluppo e specifica la porta (ad esempio: 8585):

   npm run docs:dev -- --port 8585

   Questo avvierà un server di sviluppo locale ed esporrà la porta 8585.

2. Configurare il Proxy Inverso dell'Host su ServBay

   Utilizza la funzione 'Host' di ServBay per accedere al server di sviluppo tramite proxy inverso. Nella configurazione dell'host di ServBay, aggiungi un nuovo proxy inverso:

   • Nome: My first VitePress dev site
   • Dominio: servbay-vitepress-test.dev
   • Tipo di Host: Proxy inverso
   • IP: 127.0.0.1
   • Porta: 8585

   Per i dettagli sulla configurazione, si prega di consultare Aggiungere un sito in sviluppo Nodejs.

3. Accedere alla Modalità Sviluppo

   Apri il browser e visita https://servbay-vitepress-test.dev per visualizzare il progetto in tempo reale. ServBay supporta nomi di dominio personalizzati e certificati SSL gratuiti per una maggiore sicurezza.

Build della Versione di Produzione

1. Build della Versione di Produzione

   Al termine dello sviluppo, utilizza il seguente comando per creare la versione di produzione:

   npm run docs:build

   Dopo la build, i file statici generati saranno nella directory docs/.vitepress/dist.

2. Configurare il Servizio di File Statici

   Utilizza la funzione 'Host' di ServBay per accedere alla versione di produzione tramite servizio di file statici. Nella configurazione dell'host di ServBay, aggiungi un nuovo sito statico:

   • Nome: My first VitePress production site
   • Dominio: servbay-vitepress-test.prod
   • Tipo di Host: Statico
   • Directory Radice del Sito: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Accedere alla Modalità di Produzione

   Apri il browser e visita https://servbay-vitepress-test.prod per visualizzare la versione di produzione. Con i nomi di dominio personalizzati di ServBay e i certificati SSL gratuiti, il tuo sito sarà più sicuro e affidabile.

Eseguire in Modalità URL Pulito

Se VitePress è in esecuzione in modalità URL Pulito (cioè cleanUrls: true), configura l'host di ServBay come segue:

• Nome: My first VitePress production site
• Dominio: servbay-vitepress-test.prod
• Configurazione Personalizzata: Selezionata
• Configurazione 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

Dopo aver salvato, puoi accedere a VitePress senza .html. Ad esempio: https://servbay-vitepress-test.prod/path

Seguendo questi passaggi, hai creato e eseguito con successo un progetto VitePress, utilizzando le funzionalità offerte da ServBay per gestire e accedere al tuo progetto.