Eleventy (11ty)

Que es Eleventy (11ty)?

Eleventy, a menudo escrito como 11ty, es un static site generator basado en JavaScript. Toma una carpeta de archivos de contenido, como documentos Markdown, paginas HTML y plantillas, y los transforma en paginas HTML estaticas listas para servir desde cualquier servidor web o red de distribucion de contenido. Eleventy se ejecuta por completo en el momento del build, en tu maquina o en una tuberia de integracion continua. El resultado es HTML y CSS puro, y solo JavaScript si tu lo agregas. Construido sobre Node.js, no te impone ningun framework de frontend ni te ata a un solo lenguaje de plantillas.

Que es un static site generator?

Un static site generator produce un sitio completo por adelantado en lugar de ensamblar cada pagina en cada peticion. En un stack dinamico tradicional, un servidor ejecuta codigo y consulta una base de datos cada vez que un visitante carga una pagina. Con un static site generator todo ese trabajo ocurre una vez, durante el build, y el resultado es un conjunto de archivos HTML terminados. No hay base de datos que consultar ni renderizado en servidor que esperar, y la superficie de ataque es muy pequena. Los archivos estaticos ademas se almacenan muy bien en cache en el edge, por lo que estos sitios suelen puntuar muy bien en herramientas de rendimiento y Core Web Vitals.

Como funciona Eleventy: la cascada de datos

La idea central de Eleventy es la cascada de datos. Cada pagina puede recibir datos de varias fuentes que Eleventy combina en un orden de prioridad definido: el front matter de una plantilla, archivos de datos JSON o JavaScript, valores calculados en el build y archivos de datos a nivel de directorio. Las fuentes de mayor prioridad sobrescriben a las de menor. Durante el build, Eleventy lee cada archivo de entrada, resuelve sus datos mediante la cascada, ejecuta el motor de plantillas elegido y escribe el resultado en un directorio de salida que por defecto se llama _site.

Lenguajes de plantillas compatibles

Una gran fortaleza de Eleventy es que admite muchos lenguajes de plantillas y puedes combinarlos en un mismo proyecto.

• Markdown para contenido largo como articulos y documentacion.
• Nunjucks y Liquid para layouts, bucles y condiciones.
• HTML para paginas sin ninguna logica de plantilla.
• JavaScript y WebC para un control programatico total.

Filosofia de cero configuracion

Eleventy funciona sin configuracion. Apuntalo a una carpeta de archivos y generara un sitio. A medida que el proyecto crece, agregas un unico archivo de configuracion en JavaScript puro, normalmente llamado .eleventy.js. Ahi registras shortcodes, filtros, plugins, colecciones y reglas para los archivos estaticos. Solo introduces complejidad cuando tu proyecto realmente la necesita.

Colecciones y paginacion

Las colecciones agrupan contenido relacionado. Cualquier conjunto de paginas que comparta una etiqueta, como todas las marcadas con blog, se convierte automaticamente en una coleccion sobre la que puedes iterar para construir paginas de indice, menus de navegacion y feeds. La paginacion divide una coleccion grande en varias paginas y puede generar una pagina por cada elemento de un conjunto de datos.

Por que elegir Eleventy

Los desarrolladores eligen Eleventy cuando quieren velocidad y control sin el peso de un framework de frontend completo. Como no incluye runtime de cliente por defecto, las paginas son ligeras: sin paso de hidratacion ni un gran bundle de JavaScript. El modelo mental es pequeno: contenido mas plantillas mas datos igual a HTML. Para sitios centrados en contenido, eso se traduce en builds mas rapidos y menos mantenimiento.

Eleventy frente a otras herramientas

Eleventy es un static site generator puro, mientras que algunas alternativas incluyen un framework de cliente o un runtime de servidor.

Hugo esta escrito en Go y destaca por sus builds muy rapidos. Next.js y Gatsby se basan en React y encajan para experiencias de aplicacion de una sola pagina. Astro se acerca a Eleventy pero anade un modelo de componentes con hidratacion parcial. El rasgo distintivo de Eleventy es el minimalismo.

Casos de uso tipicos

Eleventy encaja con contenido que se escribe una vez y se lee muchas: blogs personales y de empresa, documentacion tecnica, paginas de producto y marketing, changelogs, portfolios y bases de conocimiento. Todo ello se entrega como archivos estaticos a un host o CDN, sin una aplicacion en ejecucion que mantener.

Beneficios de rendimiento

La salida estatica es la base del rendimiento de Eleventy. El HTML pre-renderizado se puede servir al instante desde una cache cercana al visitante, lo que reduce el time to first byte y ayuda al Largest Contentful Paint. Como no se carga JavaScript de framework por defecto, el navegador tiene poco que hacer. Aun asi, un generador rapido es solo un punto de partida: la velocidad real depende del tamano de las imagenes, los scripts de terceros y el alojamiento, por lo que conviene medir un sitio generado en condiciones realistas, revisando Core Web Vitals y ejecutando pruebas de carga.

Primeros pasos

Como Eleventy se ejecuta sobre Node.js, empiezas instalandolo en un proyecto con un gestor de paquetes. Luego creas una carpeta de contenido, agregas un archivo de configuracion opcional y ejecutas el comando de build. Eleventy tambien incluye un servidor de desarrollo con recarga automatica, para que puedas previsualizar los cambios en local.

Limitaciones a tener en cuenta

Eleventy no es la herramienta adecuada para todos los proyectos. El contenido que debe cambiar en cada peticion, como un dashboard personalizado, necesita un backend dinamico o codigo de cliente. Los sitios muy grandes pueden tener builds largos, aunque los builds incrementales ayudan. Ademas, Eleventy da por hecho cierta familiaridad con el ecosistema de Node.js.

FAQ sobre Eleventy

Es Eleventy gratuito?

Si. Eleventy es de codigo abierto y de uso gratuito, tambien para proyectos comerciales. Lo instalas como paquete de Node.js y lo ejecutas en local o en una tuberia de build sin coste.

Necesitas saber React para usar Eleventy?

No. Eleventy no usa React ni ningun framework de cliente. Trabajas con lenguajes de plantillas como Markdown, Nunjucks y Liquid, y solo agregas JavaScript donde una funcion lo requiera.

Cual es la diferencia entre Eleventy y WordPress?

WordPress genera paginas de forma dinamica desde una base de datos en cada peticion, mientras que Eleventy pre-renderiza cada pagina como HTML estatico en el build. Los sitios de Eleventy no tienen base de datos que mantener, pero los cambios de contenido requieren un nuevo build.

Puede Eleventy con un sitio grande?

Eleventy puede construir sitios con miles de paginas. En sitios muy grandes, los rebuilds completos pueden tardar, por lo que los equipos usan builds incrementales. Cuando la velocidad de build es la prioridad maxima, algunos equipos prefieren Hugo.

Mejora Eleventy el SEO?

Eleventy no posiciona paginas por si mismo, pero el HTML rapido y limpio que produce es facil de rastrear y suele rendir bien en Core Web Vitals. El buen contenido y los metadatos correctos siguen siendo lo decisivo.

En que se diferencia Eleventy de Next.js?

Next.js es un framework de React que puede renderizar en servidor y envia un runtime de JavaScript al navegador. Eleventy es un static site generator puro sin framework de cliente por defecto. Elige Eleventy para sitios centrados en contenido y Next.js cuando necesites una aplicacion React rica.