Saltearse al contenido

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:

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.

Terminal window
npm create astro@latest -- --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.

Recursos de la comunidad

Más guías de migración