Eleventy, también conocido como 11ty, es un generador de sitios estáticos (SSG, Static Site Generator). Permite construir sitios basados en HTML, CSS y Javascript a partir de contenido en Markdown y otros lenguajes de plantillas y datos.
Eleventy, al que popularmente también se conoce como 11ty, es un generador de sitios estático para el desarrollo de proyectos en la web. Su principal foco es ofrecer una solución simplificada para que sea fácil de aprender y usar. Sin embargo, después de los años que este proyecto lleva funcionando, es actualmente un producto bastante sofisticado, con el que podemos construir proyectos avanzados.
11ty se engloba dentro de las herramientas que conocemos como Static Site Generator (SSG). Podemos entender a Eleventy como un framework, un marco de desarrollo web, en el que obtendremos como salida páginas estáticas, es decir, una herramienta que nos permitirá desarrollar proyectos donde tendremos HTML, CSS y Javascript.
Eleventy está basado en NodeJS, por lo que su uso resultará además muy natural para las personas que tienen conocimientos de Javascript para el desarrollo frontend.
Existen muchos generadores de sitios estáticos en el mercado. Eleventy es una de las muchas alternativas y está entre las más populares. Ofrece ventajas importantes, siendo la más relevante su versatilidad para conseguir adaptarse a cualquier tipo de proyecto y cualquier desarrollador. Además resulta sencillo comenzar a trabajar con Eleventy, dado que no necesitas ningún setup para poder usarlo, pudiendo trabajar incluso con estructuras de archivos y carpetas totalmente personalizados.
Es un SSG sencillo pero tampoco podemos decir que sea simple, ya que si lo deseas tienes a tu disposición la integración con numerosas herramientas habituales en el desarrollo web. Por tanto, si eres un desarrollador inexperto podrás encontrarlo sencillo de inicio y si tienes bastantes conocimientos podrás aplicarlos para hacer sitios verdaderamente sofisticados.
Más información:
Artículos destacados de Eleventy:
Manuales
Por qué usar Eleventy
Pero alguien podría pensar "¿Por qué no crear un proyecto basado en HTML / CSS o Javascript a mano? En este sentido lo que Eleventy ofrece, frente al desarrollo de los sitios directamente con técnicas tradicionales, son numerosas utilidades para poder crear un sitio web con mayor productividad y facilidad de mantenimiento. Entre otras cosas ofrece:
- Motores de templates de diversos tipos
- Intérprete del código de lenguajes como Markdown, que nos permiten expresar el contenido de una manera resumida
- Procesadores de assets vía plugins
- Gestión de datos para la parametrización en la generación de contenido
- Extensibilidad gracias a la enorme cantidad de plugins disponibles
Ahora bien, existen muchas alternativas en el mercado para generar sitios estáticos, incluso algunas extremadamente populares como NextJS o NuxtJS ¿Por qué confiar en Eleventy? Básicamente porque es una herramienta aislada de dependencias de terceros. No te obliga a trabajar con una librería frontend en concreto, como React o con un framework como Vue. Tú puedes elegir tu stack de tecnologías, lo que siempre es una ventaja a largo plazo.
Eleventy se destaca además por su simplicidad y no requerir configuración para funcionar, lo que facilita su adopción para principiantes, mientras que su naturaleza altamente personalizable atrae a usuarios más avanzados y proyectos donde se requiere salir de las convenciones comunes.
Otra de las ventajas es su velocidad, muy alta comparado con otras herramintas con las que generar sitios estáticos (SSG) como Astro, Nuxt o NextJS.
Principales Características de Eleventy
Vamos a ver cuáles son las características más destacadas en este Static Site Generator:
- Flexibilidad al usar diversos motores de plantillas: Eleventy soporta una amplia gama de motores de plantillas, como Nunjucks, Handlebars, Liquid, y más. Esto permite a los desarrolladores trabajar con el lenguaje de plantillas con el que se sientan más cómodos. En este sentido es muy flexible.
- Facilidad de uso: Se ha construido pensando en ser simple y no requerir configuración. Es por ello que Eleventy facilita los primeros pasos a los desarrolladores sin experiencia en generadores de sitios estáticos. Sin embargo, desarrolladores avanzados también conseguirán sacarle mucho partido cuando se exploran sus funcionalidades más avanzadas.
- Rendimiento alto: Al generar archivos HTML estáticos es muy rápido, lo que facilita el proceso de despligue pero también la etapa d dsarrollo.
- Personalización y extensión: A pesar de buscar la simplicidad, Eleventy es altamente personalizable, permitiendo a los desarrolladores extender su funcionalidad mediante el uso de plugins de muchos tipos.
Comparativa de Eleventy con otros generadores de sitios estáticos
Elventy se podría comparar con dos tipos de herramientas:
Los SSG fullstack
Estas herramientas son un poco más avanzadas que Eleventy y más versátiles porque con ellas podemos construir sitios estáticos pero también SPA (Single Page Applications) o aplicaciones con SSR (Server Side Rendering, incluso permiten crear servicios web (APIs REST) Por ese motivo decimos que son frameworks Fullstack.
Entre las herramientas fullstact destacan NextJS y Nuxt. Si los comparamos en versatilidad y funcionalidades, 11ty saldría perdiendo, ya que solamente permite construir sitios estáticos. Sin embargo con Eleventy conseguimos varias ventajas:
- Mayor facilidad de aprendizaje y simplicidad de uso
- Mayor rendimiento en los builds
Pero sobre todo, lo que ofrece Eleventy es la posibilidad de escoger nuestras propias tecnologías. Con 11ty podemos desarrollar haciendo uso de React, Vue, Svelte, etc. Además Eleventy se comporta de manera excelente con los Web Components estándar.
Los SSG tradicionales
Existen varias herramientas populares en la generación de sitios estáticos, cada una con sus propias características. Las más destacadas con 11ty son Jekyll, Hugo y Gatsby.
Eleventy vs. Jekyll
Jekyll es uno de los generadores de sitios estáticos más antiguos y más establecidos, muy conocido por su integración con GitHub Pages. A diferencia de Eleventy, que está construido con JavaScript y ofrece soporte para una amplia gama de motores de plantillas, Jekyll está construido en Ruby y utiliza solamnt el sistema de plantillas Liquid. Jekyll puede ser una excelente opción para usuarios menos técnicos o proyectos que buscan una integración sencilla con GitHub Pages, pero Eleventy ofrece una mayor flexibilidad en términos de elección del motor de plantillas y está más orientado hacia desarrolladores que prefieren el ecosistema de JavaScript.
Eleventy vs. Hugo
Hugo es muy destacado por su velocidad de generación del sitio, gracias a que está construido en Go. Es una excelente opción para sitios web de gran tamaño donde el tiempo de compilación se convierte en un factor crítico. Aunque Eleventy no iguala a Hugo en términos de velocidad, sí que ofrece un alto rendimiento comparado con la mayoría de los SSG populares. En compensación 11ty ofrece mayor flexibilidad y facilidad de uso, especialmente para aquellos desarrolladores que ya están familiarizados con JavaScript. Hugo, con su sintaxis de plantillas propia y su curva de aprendizaje más empinada, podría ser más adecuado para proyectos que pretenden llegar a un tamaño grande.
Eleventy vs. Gatsby
Gatsby iría un poco más allá que un simple generador de sitios estáticos. Podemos considerarlo un framework de React que permite construir aplicaciones web completas. Gatsby tiene un rico ecosistema de plugins y su integración profunda con sistemas de gestión de contenido (CMS) y fuentes de datos. Mientras que Eleventy se enfoca en la simplicidad y la generación de sitios estáticos con una curva de aprendizaje más suave, Gatsby es ideal para proyectos más complejos que requieren las capacidades de una aplicación web de una sola página (SPA) y que pueden sacarle más jugo al ecosistema React.
Popularidad de Eleventy
La popularidad de Eleventy ha ido en aumento dentro de la comunidad de desarrollo web por ser un SSG bastante sencillo y progresivo, ya que también permite llegar lejos si fuera necesario.
Su enfoque en la simplicidad y la ausencia de dependencias fijas (como sí ocurre con otros frameworks de generación de sitios estáticos) hacen que sea elegido por muchas comunidades menos masivas como la de React o Vue. Además esa misma ausencia de dependencias permite que los proyectos tengan un enfoque que permitirá el mantenimiento y buen funcionamiento a largo plazo.
Tiene una comunidad activa y prestativa y recibe numerosas actualizaciones, aportando también características avanzas para las personas que desean usarlas.
Proyectos que Usan Eleventy
Varios proyectos notables han elegido Eleventy como su herramienta de generación de sitios estáticos debido a su flexibilidad y rendimiento. Algunos ejemplos son:
- Lit.dev: el sitio de documentación de la librería Lit.
- web.dev: sitio de Google para desarrolladores
- CSS Tricks: un popular sitio para desarrolladores frontend
- Sholeace: una biblioteca de componentes de interfaz gráfica
- StackOverflow: el conocido sitio de preguntas y respuestas
La lista sería interminable e incluye proyectos de empresas tan relevantes como Red Hat, Google, Mozilla, W3C, Nasa, Jet Brains, entidades Gubernamentales de numerosos países, etc.
Crea artículos, recursos o comparte información sobre Eleventy
Preguntas y respuestas de Eleventy
Se han recibido 0 faqs en Eleventy