Tu sitio Eleventy funciona — hasta que necesitas un carrito

Por qué migrar de Eleventy a Astro

Eleventy es un generador de sitios estáticos sólido. Es minimalista, rápido y respeta tu contenido al mantenerlo en lenguajes de plantillas estándar. Si llevas tiempo con un sitio 11ty, probablemente lo elegiste exactamente por eso.

¿Entonces por qué cambiar?

Astro te da todo lo que ofrece Eleventy — cero JS por defecto, salida estática primero, builds rápidos — más un modelo de componentes, optimización de assets integrada, colecciones de contenido con tipado seguro y soporte de primera clase para frameworks. La misma filosofía, pero con una experiencia de desarrollo mucho mejor.

Hemos migrado docenas de sitios Eleventy a Astro. Es una de las transiciones más fluidas que gestionamos porque los modelos mentales se alinean muy bien. Ambas herramientas respetan la salida estática. Ambas envían JavaScript mínimo. La diferencia aparece cuando necesitas más.

Los puntos de dolor con Eleventy

Fragmentación de lenguajes de plantillas

Eleventy soporta HTML, Markdown, Nunjucks, Liquid, Handlebars, Mustache, EJS, Haml, Pug, WebC y lenguajes personalizados. Eso se vende como flexibilidad. En la práctica, genera fragmentación. Tus includes pueden ser Nunjucks, tus layouts Liquid, tus archivos de datos JavaScript. Los nuevos desarrolladores que se unen al proyecto pasan su primera semana intentando entender qué lenguaje de plantillas hace qué.

Nunjucks en sí está prácticamente sin mantenimiento — el proyecto de Mozilla no ha recibido actualizaciones significativas en años. La implementación de Liquid en 11ty no soporta completamente los argumentos con nombre. WebC se introdujo como alternativa moderna, pero no ha alcanzado una adopción generalizada.

Pipeline de assets manual

Eleventy deliberadamente no gestiona CSS, JavaScript ni optimización de imágenes. Tú configuras tu propio pipeline de build — normalmente PostCSS, esbuild o Vite, y el plugin eleventy-img. Potente si sabes lo que haces, pero cada proyecto comienza con una configuración significativa de herramientas antes de escribir una sola línea de contenido.

La complejidad del Data Cascade

El data cascade de 11ty es potente pero opaco. Los datos fluyen desde archivos de datos globales, archivos de datos de directorio, frontmatter de plantillas, datos computados y archivos de datos JavaScript — todo fusionándose en un orden de prioridad específico. Depurar problemas de datos significa entender toda la cascada. Incluso los desarrolladores con experiencia tropiezan con esto.

Sin modelo de componentes

Eleventy usa includes y shortcodes para la UI reutilizable. Funcionan, pero no son componentes. No puedes pasar props tipadas, colocalizar estilos ni mejorar progresivamente elementos de UI específicos con interactividad del lado del cliente sin construir una solución personalizada desde cero.

Lo que Astro te aporta

Componentes reales, sin runtime

Los componentes de Astro parecen HTML con un bloque de script en el frontmatter. Soportan props tipadas, estilos con alcance local y composición basada en slots. Se compilan a cero JavaScript por defecto — igual que tus plantillas Nunjucks, pero con un modelo de componentes real detrás.

---
interface Props {
  title: string;
  date: Date;
}
const { title, date } = Astro.props;
---
<article>
  <h2>{title}</h2>
  <time datetime={date.toISOString()}>{title}</time>
  <slot />
</article>
<style>
  article { /* alcance automático */ }
</style>

Colecciones de contenido con tipado seguro

Las colecciones de contenido de Astro reemplazan el data cascade de 11ty con un sistema validado por esquemas y con tipado seguro. Defines el esquema de tu contenido usando Zod, y Astro valida cada pieza de contenido en el momento del build. Sin más sorpresas por campos de frontmatter faltantes descubiertos en producción.

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false),
  }),
});

Esto sustituye el data cascade implícito por esquemas explícitos y validados. Tu IDE autocompleta los campos de contenido. Los errores de build detectan datos faltantes antes del despliegue.

Optimización de assets integrada

Astro gestiona el bundling de CSS, el procesamiento de JavaScript y la optimización de imágenes de serie. El componente <Image /> genera imágenes responsivas con srcset adecuado, convierte a WebP/AVIF y gestiona la carga diferida — sin configuración de plugins.

Islands de framework cuando los necesitas

¿Necesitas interactividad del lado del cliente — un widget de búsqueda, un gráfico interactivo, un formulario con validación? La arquitectura de islands de Astro te permite incluir componentes de React, Svelte, Vue o Solid que se hidratan de forma independiente. Con Eleventy, cada elemento interactivo requiere un bundling de JavaScript personalizado. Tú construyes esa infraestructura tú mismo.

Nuestro proceso de migración

Fase 1: Auditoría y arquitectura (semana 1)

Analizamos la estructura de tu proyecto 11ty existente — lenguajes de plantillas en uso, dependencias del data cascade, shortcodes, plugins y filtros personalizados. Cada plantilla Nunjucks/Liquid se mapea a su componente Astro equivalente, y documentamos el flujo de datos completo antes de escribir una sola línea de código nuevo.

Fase 2: Migración de contenido (semanas 1-2)

Tu contenido Markdown se transfiere directamente — Astro lee el mismo formato de frontmatter. Definimos esquemas Zod basados en tus patrones de frontmatter existentes y configuramos las colecciones de contenido. Si usas datos computados de 11ty o archivos de datos JavaScript, los convertimos a los patrones de carga de datos de Astro.

La conversión de plantillas sigue patrones predecibles:

Eleventy	Astro
{% include "header.njk" %}	<Header />
{% block content %}{% endblock %}	<slot />
{{ variable | filter }}	{variable} con transformaciones JS
{% for item in collection %}	{collection.map(item => ...)}
Shortcodes	Componentes Astro
_data/ datos globales	Astro.glob() o colecciones de contenido

Fase 3: Diseño y construcción de componentes (semanas 2-3)

Reconstruimos tus plantillas como componentes Astro con estilos de alcance local. Aquí es donde la mejora se hace evidente. Las plantillas que eran includes de Nunjucks incómodos se convierten en unidades limpias, tipadas y componibles. Implementamos imágenes responsivas, optimizamos fuentes y añadimos los islands interactivos que tu sitio necesita.

Fase 4: Pruebas y verificación SEO (semanas 3-4)

Auditorías completas de Lighthouse. Cada URL validada contra tu sitemap existente. Redirecciones probadas. Datos estructurados verificados. Comprobamos que los feeds RSS, las meta etiquetas sociales y las URLs canónicas coincidan con tu configuración actual antes de que nada salga en producción.

Estrategia de preservación del SEO

Tanto Eleventy como Astro generan HTML estático, lo que hace que la migración SEO sea mucho más sencilla que moverse desde un framework renderizado en el cliente. Esto es lo que gestionamos específicamente:

• Paridad de URLs: Mapeamos cada URL existente y garantizamos rutas idénticas en Astro. Si tu sitio 11ty usa estructuras de permalink personalizadas, las replicamos exactamente.
• Redirecciones 301: Para cualquier URL que deba cambiar, configuramos redirecciones adecuadas a nivel de hosting.
• Generación de sitemap: La integración @astrojs/sitemap de Astro genera un sitemap preciso de forma automática.
• Meta etiquetas: Todas las etiquetas de título, meta descripciones, etiquetas Open Graph y datos estructurados se transfieren a la gestión de <head> de Astro.
• Mejoras de rendimiento: La optimización integrada de imágenes y el bundling de assets mejoran típicamente los Core Web Vitals, lo que repercute positivamente en el posicionamiento en buscadores.

Plazos y precios

Las migraciones de Eleventy a Astro se encuentran entre las más rápidas que realizamos. El contenido se transfiere con cambios mínimos y la conversión de plantillas sigue patrones mecánicos. Las filosofías son tan cercanas que no se requiere repensar nada desde los cimientos.

• Sitios pequeños (menos de 20 plantillas, blog/docs): 2-3 semanas, desde $4.000
• Sitios medianos (20-50 plantillas, múltiples tipos de contenido): 3-5 semanas, desde $8.000
• Sitios grandes (50+ plantillas, relaciones de datos complejas, funciones interactivas): 5-8 semanas, desde $15.000

Cada migración comienza con una auditoría gratuita — evaluamos tu configuración actual de 11ty y producimos un documento de alcance detallado. Sin sorpresas.