Migrando desde Gridsome

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

Principales similitudes entre Gridsome y Astro

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

Gridsome y Astro son generadores de sitios estáticos modernos en JavaScript con estructuras de archivos de proyectos similares.
Gridsome y Astro utilizan una carpeta src/ para los archivos de tu proyecto y una carpeta especial src/pages/ para el enrutamiento basado en archivos. La creación y gestión de páginas para tu sitio debería resultarte familiar.
Astro cuenta con una integración oficial para usar componentes de Vue y admite la instalación de paquetes NPM, incluyendo varios para Vue. Podrás escribir componentes de UI de Vue y es posible que puedas conservar algunos o todos tus componentes y dependencias de Vue de Gridsome existentes.
Astro y Gridsome te permiten utilizar un headless CMS, APIs o archivos Markdown para los datos. Puedes seguir usando tu sistema preferido de creación de contenido, y podrás mantener todo tu contenido existente.

Principales diferencias entre Gridsome y Astro

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

Gridsome es una aplicación de una sola página (SPA) construida en Vue. Los sitios de Astro son aplicaciones de varias páginas construidas utilizando componentes .astro, pero también puede admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas de HTML sin procesar.
Como una SPA, Gridsome utiliza vue-router para el enrutamiento SPA, y vue-meta para gestionar la etiqueta <head>. En Astro, crearás páginas HTML separadas y controlarás la etiqueta <head> de cada página directamente, o a través de un componente de diseño.
Datos de archivos locales: Gridsome utiliza GraphQL para recuperar los datos de tu proyecto. Astro usa importaciones ESM y el helper Astro.glob() para importar los datos de archivos locales del proyecto. Los recursos remotos pueden cargarse utilizando el API estándar fetch(). GraphQL se puede añadir opcionalmente a tu proyecto, pero no está incluido por defecto.

Migrar desde Gridsome a Astro

Para migrar un blog de Gridsome a Astro, empieza con nuestra plantilla inicial para blogs, o explora más temas de la comunidad para blogs en nuestro catálogo de temas.

Puedes pasar el argumento --template al comando create astro para empezar un nuevo proyecto de Astro con una de nuestras plantillas oficiales. O, puedes comenzar un nuevo proyecto desde cualquier repositorio de Astro existente en GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

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

Dado que la estructura del proyecto de Gridsome es similar a la de Astro, es posible 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 proyectos no son idénticas. Es posible que desees examinar la estructura del proyecto de Astro para ver cuáles son las diferencias.

Ya que Astro consulta e importa tus archivos locales de manera diferente a Gridsome, es posible que desees leer acerca de cómo cargar archivos usando Astro.glob() para entender cómo trabajar con tus archivos locales.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, mira 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 solo clic para abrir un proyecto de trabajo en los entornos de desarrollo en línea de StackBlitz, CodeSandbox y Gitpod.