Migrar desde VuePress

VuePress es un generador de sitios estáticos de código abierto construido sobre Vue.

Similitudes clave entre VuePress y Astro

VuePress y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

Tanto VuePress como Astro son generadores de sitios estáticos modernos de JavaScript con estructuras de archivos de proyecto similares. Ambos usan una carpeta especial src/pages/ para enrutamiento basado en archivos. Crear y gestionar páginas para tu sitio debería resultarte familiar.
Tanto Astro como VuePress están diseñados para sitios web orientados a contenido, con excelente soporte integrado para archivos Markdown. Escribir en Markdown te resultará familiar, y podrás conservar tu contenido existente.
Astro tiene una integración oficial para usar componentes de Vue y soporta instalar paquetes NPM, incluyendo varios para Vue. Podrás escribir componentes de UI de Vue, y puede que puedas conservar algunos o todos tus componentes y dependencias de Vue existentes.

Diferencias clave entre VuePress y Astro

Cuando reconstruyas tu sitio de VuePress en Astro, notarás algunas diferencias importantes.

VuePress es una single-page application (SPA) basada en Vue. Los sitios de Astro son apps multi-página construidas usando componentes .astro, pero también pueden soportar React, Preact, Vue.js, Svelte, SolidJS, AlpineJS y plantillas HTML crudo.
Plantillas de layout: Los sitios de VuePress se crean usando archivos Markdown (.md) para contenido de página y plantillas HTML (.html) para layout. Astro es basado en componentes, y usa componentes de Astro, que incluyen plantillas HTML para páginas, layouts y elementos de UI individuales. Astro también puede crear páginas desde archivos .md y .mdx, usando un componente de layout de Astro para envolver contenido Markdown en una plantilla de página.
VuePress fue diseñado para construir sitios con mucho contenido, centrados en Markdown y tiene algunas características de sitios web específicas para documentación integradas que tendrías que construir tú mismo en Astro. En su lugar, Astro ofrece algunas características específicas para documentación a través de un tema de docs oficial. ¡Este sitio web fue la inspiración para esa plantilla! También puedes encontrar más temas de docs de la comunidad con características integradas en nuestro Showcase de Temas.

Cambiar de VuePress a Astro

Para convertir un sitio de documentación de VuePress a Astro, comienza con nuestra plantilla de inicio del tema de docs de Starlight oficial, o explora más temas de docs de la comunidad en nuestro showcase de temas.

Puedes pasar un argumento --template al comando create astro para iniciar un nuevo proyecto de Astro con uno de nuestros starters oficiales. O, puedes iniciar un nuevo proyecto desde cualquier repositorio existente de Astro en GitHub.

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

Trae tus archivos de contenido Markdown existentes para crear páginas Markdown. Aún puedes aprovechar el enrutamiento basado en archivos moviendo estos documentos desde docs en VuePress a src/pages/ en Astro. Crea carpetas con nombres que correspondan a tu proyecto de VuePress existente, y deberías poder conservar tus URLs existentes.

VuePress, o cualquier tema que instalaras, probablemente gestionó gran parte del layout y metadatos de tu sitio por ti. Puede que quieras leer sobre cómo construir Layouts de Astro como wrappers de páginas Markdown para ver cómo gestionar las plantillas tú mismo en Astro, incluyendo el <head> de tu página.

Puedes encontrar la plantilla de inicio de docs de Astro, y otras plantillas, en astro.new. Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un solo clic para abrir un proyecto funcional en los entornos de desarrollo en línea StackBlitz y CodeSandbox.