Migrar desde Gridsome

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

Similitudes clave entre Gridsome y Astro

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

Tanto Gridsome como Astro son generadores de sitios estáticos modernos basados en JavaScript con estructuras de archivos de proyecto similares.
Tanto Gridsome como Astro usan una carpeta src/ para tus archivos de proyecto y una carpeta especial src/pages/ para enrutamiento basado en archivos. Crear y gestionar páginas para tu sitio debería resultarte familiar.
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 de Gridsome existentes.
Tanto Astro como Gridsome te permiten usar un CMS headless, APIs o archivos Markdown para datos. Puedes continuar usando tu sistema de creación de contenido preferido, y podrás conservar tu contenido existente.

Diferencias clave entre Gridsome y Astro

Cuando reconstruyas tu sitio de Gridsome en Astro, notarás algunas diferencias importantes:

Gridsome 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.
Como SPA, Gridsome usa vue-router para enrutamiento SPA, y vue-meta para gestionar <head>. En Astro, crearás páginas HTML separadas y controlarás el <head> de tu página directamente, o en un componente de layout.
Datos de archivos locales: Gridsome usa GraphQL para recuperar datos de los archivos de tu proyecto. Astro usa imports ESM y import.meta.glob() para importar datos de archivos locales del proyecto. Los recursos remotos pueden cargarse usando la API estándar fetch(). GraphQL puede añadirse opcionalmente a tu proyecto, pero no está incluido por defecto.

Cambiar de Gridsome a Astro

Para convertir un blog de Gridsome a Astro, comienza con nuestra plantilla de inicio del tema de blog, o explora más temas de blog 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 blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Trae tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para crear páginas Markdown o MDX.

Como la estructura de proyecto de Gridsome es similar a la de Astro, puede que puedas copiar varios archivos existentes de tu proyecto a la misma ubicación en tu nuevo proyecto de Astro. Sin embargo, las dos estructuras de proyecto no son idénticas. Puede que quieras examinar la estructura de proyecto de Astro para ver cuáles son las diferencias.

Como Astro consulta e importa tus archivos locales de manera diferente a Gridsome, puede que quieras leer sobre cómo cargar archivos usando import.meta.glob() para entender cómo trabajar con tus archivos locales.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, consulta más plantillas oficiales de inicio en astro.new. Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un clic para abrir un proyecto funcional en los entornos de desarrollo en línea StackBlitz y CodeSandbox.