Sitios estáticos con Eleventy

1 - Introducción

Eleventy es un generador de sitios estáticos (SGG) basado en javascript, sin frameworks agregados (aunque se usa sin problemas junto con React, Vue, Lit, Laravel, etc.), y que puede utilizar una gran variedad de otros lenguajes en distintas tareas (HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, Toml, Yaml, etc.), solos o combinados, así como CSS, Sass, Scss o PostCss.

Yo utilizo principalmente una combinación de javascript, html, markdown y nunjucks (y distintas formas de CSS, SCss o PostCss según el proyecto, para este TailwindCSS usado como plugin de PostCSS).

Si no se quieren complicar con la programación les sugiero que directamente elijan una plantilla que se adapte a sus gustos. Pueden encontrar muchas de ellas en la sección starters del sitio oficial y varias más con una búsqueda en la web.

Los "starters" varían en complejidad y en las herramientas que ya tienen instalados, desde los más básicos, con un esqueleto mínimo, hasta los más completos que solo necesitan que se agregue el contenido propio, y a lo sumo personalizar los estilos.

2 - Requisitos previos

Para que estas páginas sean de utilidad creo que se necesita un conocimiento al menos básico de programación web, principalmente HTML, javascript y CSS.

Markdown y Nunjucks son relativamente fáciles de aprender, así que algunas cosas de ellos las veremos sobre la marcha.

También se requiere tener instalado node y es preferible usar algún sistema de control de versiones como git.

Sobre Node uso npm, pero no hay demasiadas diferencias si quieres utilizar yarn como manejador de paquetes.

Si entiendes inglés la documentación de eleventy es muy completa, y hay varios sitios y tutoriales dedicados al tema (entre ellos me gustó 11ty Rocks!).