Curso de Eleventy SSG

En el mundo de Internet existen muchas tecnologías, frameworks y CMS para crear sitios y aplicaciones web. Cada una de ellas ofrece ventajas e inconvenientes, así como los distintos proyectos que se adaptan mejor a un stack particular u otro.

Una de las vertientes que ha tomado mucha fuerza en los últimos años es la creación de sitios estáticos, mediante un SSG, por sus capacidades de optimización, facilidad de mantenimiento y además ofrecer los niveles de seguridad más elevados.

Quizás te extrañe oír hablar de "sitios estáticos" y te evoque la época en la que se  trabajaba solamente con HTML y CSS. Quizás pienses que todo eso está muy pasado de moda, ya que actualmente existen numerosas tecnologías para conseguir comportamientos dinámicos. Si es así merece la pena explicar qué es un SSG.

Qué es un SSG:

Un SSG (Static Site Generator), es un sistema que permite desarrollar sitios web con todas las ventajas de otros lenguajes como PHP, como acceso a bases de datos, sistemas de templates, uso intensivo de Javascript para los dinamismos, etc. Solo que, en lugar de renderizarse cada página cada vez que un cliente la solicita, como ocurre en PHP, las páginas se construyen en el proceso de llevar a producción el sitio. De este modo, todos los archivos del proyecto quedan volcados en HTML plano, con su CSS y Javascript.

Este estilo de trabajo ofrece muchas ventajas. Principalmente se pueden destacar:

La velocidad, ya que no se tiene que generar el contenido HTML cuando se visita una página. En lugar de ello está ya listo en el servidor y producido para ser entregado. Por tanto, al no tener que procesar PHP, acceder a las fuentes de datos y todo eso, el servidor es capaz de responder instantáneamente.
La seguridad, ya que los archivos HTML, CSS y Javascript planos no tienen opción de corromperse ni el servidor ejecuta lenguajes o programas donde posibles atacantes sean capaces de explotar vulnerabilidades.

En otras palabras, al producir tu web en archivos estáticos, cualquier espacio de hosting básico podrá enviar los archivos. No tendrás que preocuparte por dependencias en el servidor, ni actualizar el CMS, ni los lenguajes de programación, librerías, etc. Pero todavía hay más, ya que el uso de SSG encaja perfectamente con la disciplina de DevOps. De este modo, realizar la producción de los archivos en el momento de despliegue, implementando procesos de CI/CD, resulta tan fácil como un juego de niños.

Qué es Eleventy:

Eleventy (abreviado como 11ty) es uno de los muchos Static Site Generators que nos ofrece el mercado. Pero tiene una particularidad: es mucho más simple y rápido que la mayoría. Además es flexible porque lo puedes usar de muchos modos y versátil, porque no te ata a un stack de tecnologías en concreto.

Eleventy es competidor de otros proyectos como NextJS o Nuxt, sin embargo resulta mucho más sencillo de usar y no deja al desarrollador restringido a un framework o librería de componentes determinada, por lo que lo puedes usar con Vue, React, VanillaJS, Lit o cualquier otro. Por supuesto, también soporta trabajar con cualquier framework CSS como Tailwind, Bootstrap o similares.

Debido a su sencillez y versatilidad numerosas empresas usan Eleventy en sus proyectos, como la Nasa, Google, Microsoft, Mozilla, Apache, Ubuntu, Red Hat, Greenpeace, CSS Tricks, Stack Overflow, Netlify y un largo etc. En fin, estás ante una herramienta usada entre los proyectos más relevantes de Internet y no por ello se trata de un framework complejo y pesado, como comprobarás en este Curso del SSG Eleventy.