Crear y ejecutar un proyecto VitePress

¿Qué es VitePress?

VitePress es un generador de sitios web estáticos basado en Vite, diseñado específicamente para escribir documentación. VitePress está impulsado por Vue, ofreciendo una velocidad de compilación y experiencia de desarrollo extremadamente rápida. Proporciona una API simple y poderosa que facilita la creación y el mantenimiento de la documentación.

Características y ventajas principales de VitePress

• Experiencia de desarrollo rápida: VitePress utiliza Vite como herramienta de compilación subyacente, ofreciendo una actualización instantánea y velocidades de compilación muy rápidas.
• Configuración sencilla: A través de un archivo de configuración simple, los usuarios pueden configurar y personalizar rápidamente su sitio de documentación.
• Potentes extensiones de Markdown: Admite componentes de Vue y plugins personalizados de Markdown, haciendo que la escritura de documentación sea más flexible y poderosa.
• SEO integrado: Mapa del sitio generado automáticamente y estructura HTML optimizada, mejorando la amigabilidad con los motores de búsqueda.
• Tamaño de paquete muy pequeño: Mediante la técnica de Tree-shaking, los archivos estáticos generados son muy pequeños y se cargan rápidamente.

Usar VitePress puede ayudar a los desarrolladores a crear sitios web de documentación de alto rendimiento rápidamente.

Crear y ejecutar un proyecto VitePress usando ServBay

En este artículo, utilizaremos el entorno de Node.js proporcionado por ServBay para crear y ejecutar un proyecto VitePress. Usaremos la función "Host" de ServBay para configurar el servidor web y acceder al proyecto a través de un proxy inverso y un servicio de archivos estáticos.

Crear el proyecto VitePress

1. Inicializar el proyecto

   Primero, asegúrese de que ya ha instalado el entorno de Node.js proporcionado por ServBay. Luego, utilice los siguientes comandos para inicializar un nuevo proyecto VitePress:

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

   Siga las instrucciones para ingresar la información del proyecto y seleccionar otras opciones según sea necesario:

    ┌  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.

Modificar el contenido del proyecto VitePress

1. Modificar el archivo docs/index.md

   Abra el archivo docs/index.md y modifique el contenido para que la página web muestre "Hello ServBay!"

   # Hello ServBay!
   
   Bienvenido a usar ServBay para ejecutar el sitio de documentación VitePress.

Iniciar el modo de desarrollo

1. Ejecutar el servidor de desarrollo

   Inicie el servidor de desarrollo y especifique el puerto (por ejemplo: 8585):

   npm run docs:dev -- --port 8585

   Esto iniciará un servidor de desarrollo local y expondrá el puerto 8585.

2. Configurar el proxy inverso del host en ServBay

   Usando la función "Host" de ServBay, configure un proxy inverso para acceder al servidor de desarrollo. En la configuración del host de ServBay, añada un nuevo proxy inverso:

   • Nombre: My first VitePress dev site
   • Dominio: servbay-vitepress-test.dev
   • Tipo de host: Proxy inverso
   • IP: 127.0.0.1
   • Puerto: 8585

   Consulte los pasos detallados en agregar un sitio en desarrollo de Nodejs.

3. Acceder al modo de desarrollo

   Abra su navegador y visite https://servbay-vitepress-test.dev para ver el proyecto en tiempo real. Dado que ServBay admite dominios personalizados y certificados SSL gratuitos, podrá disfrutar de mayor seguridad.

Construir la versión de producción

1. Construir la versión de producción

   Una vez completado el desarrollo, use el siguiente comando para construir la versión de producción:

   npm run docs:build

   Una vez completada la construcción, los archivos estáticos generados se encontrarán en el directorio docs/.vitepress/dist.

2. Configurar el servicio de archivos estáticos

   Usando la función "Host" de ServBay, configure un servicio de archivos estáticos para acceder a la versión de producción. En la configuración del host de ServBay, añada un nuevo sitio estático:

   • Nombre: My first VitePress production site
   • Dominio: servbay-vitepress-test.prod
   • Tipo de host: Estático
   • Directorio raíz del sitio: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Acceder al modo de producción

   Abra su navegador y visite https://servbay-vitepress-test.prod para ver la versión de producción. Con los dominios personalizados y certificados SSL gratuitos de ServBay, su sitio tendrá mayor seguridad y credibilidad.

Ejecutar en Clean URL modo

Si su VitePress está ejecutándose en modo Clean URL (es decir, cleanUrls: true), por favor configure el host de ServBay como se muestra a continuación:

• Nombre: My first VitePress production site
• Dominio: servbay-vitepress-test.prod
• Configuración personalizada: Marcado
• Configuración de 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

Después de guardar, podrá acceder a VitePress sin .html. Por ejemplo, https://servbay-vitepress-test.prod/path

Con los pasos anteriores, ha creado y ejecutado con éxito un proyecto VitePress y ha utilizado las funciones de ServBay para gestionar y acceder a su proyecto.