Eleventy (11ty)

¿Qué es Eleventy (11ty)?

Eleventy (11ty) es un generador de sitios estáticos en JavaScript que funciona sobre Node.js. Lee archivos de contenido y de plantilla, como Markdown, Nunjucks o Liquid, y escribe archivos HTML estáticos en una carpeta de salida (_site por defecto) que puedes subir a cualquier hosting o CDN.

Pertenece a la misma familia que Hugo y Astro: el trabajo ocurre al compilar, así que el visitante recibe un archivo ya terminado en lugar de una página montada en cada petición. Para la idea general, consulta generación de sitios estáticos (SSG).

Cómo funciona Eleventy

Eleventy lee un directorio de entrada (por defecto, el actual), convierte cada plantilla en una o varias páginas y las escribe en el directorio de salida. Los layouts envuelven el contenido y los datos de varias fuentes se combinan antes de renderizar cada página. Eleventy llama a esa combinación la cascada de datos. Si dos fuentes definen la misma clave, gana la de mayor prioridad. De mayor a menor:

• Datos calculados (computed data)
• Front matter de la propia plantilla
• Archivos de datos de la plantilla
• Archivos de datos del directorio, incluidos los de carpetas superiores
• Front matter de los layouts
• Datos globales definidos en la configuración
• Archivos de datos globales

La configuración vive en un archivo JavaScript que Eleventy encuentra solo, por ejemplo eleventy.config.js. La variante .mjs se admite desde Eleventy 3.

Lenguajes de plantilla compatibles

Eleventy no te obliga a usar un único lenguaje de plantillas. Su documentación enumera HTML, Markdown, MDX, JavaScript, JSX, TypeScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug y Sass, y se puede añadir uno propio. Puedes mezclarlos en un proyecto, lo que facilita migrar un sitio antiguo plantilla a plantilla.

Colecciones y paginación

Las colecciones agrupan contenido. Si varias páginas comparten la misma cadena en tags del front matter, aparecen juntas en collections.<etiqueta>; collections.all contiene todo por defecto. Las etiquetas solo sirven para crear colecciones, no son una jerarquía de categorías.

La paginación convierte una plantilla en muchas páginas. Añades un bloque pagination con una fuente data, un size y normalmente un permalink. Con cuatro elementos y tamaño dos, Eleventy escribe dos páginas y da a cada una sus elementos más enlaces a la anterior y la siguiente.

Ejemplo: un blog pequeño

Guarda artículos en Markdown en una carpeta posts, asigna a cada uno tags: post y un layout, y añade una plantilla de índice que recorra collections.post. Tras compilar, la carpeta de salida contiene un HTML por artículo y una página de listado. Sube esa carpeta y el sitio está en línea. No hay servidor de aplicación que mantener.

Errores comunes

• Esperar funciones en tiempo de petición. Un sitio generado no renderiza en el servidor, así que formularios, búsqueda, comentarios y accesos necesitan un servicio externo o una función serverless. Si necesitas páginas generadas por petición, mira renderizado en el servidor (SSR).
• Tratar las etiquetas como categorías. Solo crean colecciones, así que planifica tu propia taxonomía en el front matter o en archivos de datos.
• Sorprenderse con la prioridad de la cascada de datos. Un valor del front matter gana a uno de un archivo de datos de directorio, y los datos calculados ganan a ambos. Revisa el orden anterior antes de depurar un valor que no cambia.
• Volver a añadir mucho JavaScript en el cliente. La ventaja de velocidad viene de enviar poco script, así que mide antes de añadir bundles.

Eleventy, pruebas de carga y monitorización

Un sitio estático servido desde un CDN rara vez se hunde por el tráfico, así que una prueba de carga de todo el sitio suele servir menos que probar lo que no es estático: manejadores de formularios, endpoints de búsqueda y funciones serverless. Usa las pruebas de carga de LoadFocus para esos endpoints y la monitorización de APIs para vigilarlos entre versiones.

Como la salida es HTML puro, la velocidad depende sobre todo de los recursos y del hosting. La monitorización de velocidad de página sigue las puntuaciones de Lighthouse y las Core Web Vitals con el tiempo, y el artículo (en inglés) How to monitor Core Web Vitals with alerts and reports explica la configuración.

Preguntas frecuentes sobre Eleventy

¿Eleventy es un framework?

No. Es una herramienta de compilación que convierte plantillas y datos en archivos estáticos. No incluye un runtime de front-end propio, así que decides tú si añades JavaScript en el cliente.

¿Qué necesito para ejecutar Eleventy?

Node.js. La documentación pide la versión 18 o superior y recomienda las versiones pares.

¿Puede Eleventy renderizar páginas en el servidor en cada petición?

La salida por defecto es HTML estático generado de antemano. Para renderizar por petición, usa un framework con renderizado en servidor como Next.js o Nuxt, o llama a una función serverless desde tus páginas estáticas.

¿En qué se diferencia Eleventy de Hugo?

Ambos generan sitios estáticos. Eleventy funciona sobre Node.js y se configura en JavaScript con muchos lenguajes de plantilla, mientras que Hugo es un único programa en Go con su propio sistema de plantillas.

¿Dónde puedo alojar un sitio Eleventy?

En cualquier sitio que sirva archivos estáticos: un bucket de almacenamiento detrás de un CDN, un servicio de hosting estático o un servidor web sencillo. Sube el contenido de la carpeta de salida.