Migrando desde SvelteKit

SvelteKit es un framework para construir aplicaciones web sobre Svelte.

Principales similitudes entre SvelteKit y Astro

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

SvelteKit y Astro son generadores de sitios estáticos y frameworks de renderizado del lado del servidor en JavaScript moderno.
SvelteKit y Astro usan la carpeta src/ para los archivos de tu proyecto y una carpeta especial para enrutamiento basado en archivos. Crear y administrar páginas para tu sitio debería ser familiar.
Astro tiene una integración oficial para utilizar componentes de Svelte y admite la instalación de paquetes NPM, incluyendo varios para Svelte. Podrás escribir componentes de UI en Svelte, y tal vez podrás conservar algunos o todos tus componentes y dependencias existentes.
Astro y SvelteKit te permiten usar un headless CMS, APIs or archivos Markdown para los datos. Podrás seguir utilizando tu sistema preferido de creación de contenido, y conservar tu contenido existente.

Principales diferencias entre SvelteKit y Astro

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

Los sitios de Astro son aplicaciones de varias páginas, mientras que en SvelteKit se enfoca en aplicaciones de una sola página (SPA) con renderizado en el lado del servidor, pero también puede crear aplicaciones de varias páginas (MPA), SPAs tradicionales, o mezclar y combinar estas técnicas dentro de una misma aplicación.
Componentes: SvelteKit usa Svelte. Las páginas de Astro se construyen utilizando componentes .astro, pero también puede admitir React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit y plantillas HTML sin procesar.
Orientado al contenido: Astro fue diseñado para mostrar tu contenido y permitirte optar por la interactividad solo cuando sea necesario. Una aplicación existente de SvelteKit puede estar construida para una alta interactividad del lado del cliente. Astro tiene capacidades integradas para trabajar con tu contenido, como la generación de páginas, pero puede requerir técnicas avanzadas de Astro para incluir elementos que son más difíciles de replicar utilizando componentes .astro, como los paneles de control.
Preparado para Markdown: Astro incluye soporte integrado para Markdown, y incluye una propiedad especial layout de YAML frontmatter utilizada por archivo para la plantilla de la página. Si estás convirtiendo un blog de SvelteKit basado en Markdown, no tendrás que instalar una integración de Markdown separada ni establecer una plantilla mediante un archivo de configuración. Puedes llevar tus archivos Markdown existentes, pero es posible que debas reorganizarlos ya que la navegación basada en archivos de Astro no requiere una carpeta para cada ruta de página.

Migrar desde SvelteKit a Astro

Para migrar un blog de SvelteKit 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.

Aunque el enrutamiento basado en archivos y los components de diseño son similares en Astro, es posible que desees leer acerca de la estructura de proyectos de Astro para aprender dónde deben ubicarse los archivos.

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.