from-eleventy.mdx

title	description	type	stub	framework	i18nReady
Migrando desde Eleventy	Consejos para migrar un proyecto existente de Eleventy a Astro	migration	true	Eleventy	true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Eleventy es un generador de sitios estáticos de código abierto que funciona con varios lenguajes de plantillas.

Principales similitudes entre Eleventy (11ty) y Astro

Eleventy (11ty) y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

• Tanto Astro como Eleventy son generadores de sitios modernos basados en JavaScript (Jamstack).

• Astro y Eleventy te permiten usar un CMS headless, APIs o archivos Markdown para datos. Puedes continuar usando tu sistema de autoría de contenido preferido, y podrás mantener tu contenido existente.

• Astro y Eleventy construyen aplicaciones de múltiples páginas.

Principales diferencias entre Eleventy (11ty) y Astro

Cuando reconstruyas tu sitio de Eleventy (11ty) en Astro, notarás algunas diferencias importantes:

• Eleventy admite una variedad de lenguajes de plantillas. Astro admite la inclusión de componentes de varios frameworks populares de JavaScript (por ejemplo, React, Svelte, Vue, Solid), pero utiliza diseños, páginas y componentes de Astro para la mayoría de las plantillas de páginas.

• Astro usa una carpeta src/ para todos los archivos, incluidos los metadatos del sitio, que están disponibles para consultas y procesamiento durante la construcción del sitio. Dentro de este directorio se encuentra una carpeta especial src/pages/ para el enrutamiento basado en archivos.

• Astro usa una carpeta public/ para activos estáticos que no necesitan ser procesados ni transformados durante la construcción.

• En Eleventy, el empaquetado de CSS, JavaScript y otros activos debe configurarse manualmente. Astro lo maneja por ti de forma predeterminada.

Migrar de Eleventy a Astro

Para convertir un blog de Eleventy a Astro, comienza con nuestra plantilla de inicio de tema de blog, o explora más temas de blog de la comunidad en nuestro mostrador 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.

```shell npm create astro@latest -- --template blog ``` ```shell pnpm create astro@latest --template blog ``` ```shell yarn create astro --template blog ```

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

Tu proyecto Eleventy te permitió usar una variedad de lenguajes plantilla para construir tu sitio. En un proyecto Astro, la plantilla de página se logrará principalmente con componentes de Astro, que se pueden usar como elementos de IU, diseños e incluso páginas completas. Puedes explorar la sintaxis de componentes de Astro para ver cómo plantillar en Astro usando componentes.

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

Recursos de la Comunidad

• ¡Añade el tuyo!