Desde entonces, el término Jamstack ha sido rechazado por Netlify. Sin embargo, la mayoría de los sitios no necesitan páginas dinámicas de un servidor y pueden ser simplemente lo que la web siempre se supuso que sería: páginas enlazadas de HTML y CSS, con un poco de ayuda de JavaScript.

Publii es un creador de sitios web estáticos todo en uno, lo que es una gran solución si no quieres tocar ningún código. Pero con un poco de esfuerzo puedes producir sitios más rápidos y pulidos utilizando componentes web modernos y teniendo más control sobre el proceso.

Eleventy (a menudo abreviado como 11ty) es otra herramienta más en la bolsa de herramientas de JavaScript con nombres extraños. Pero, ¿ qué ofrece como generador de sitios estáticos? Además de comprender muchos lenguajes de plantillas, observo que muchas de las ventajas que se le atribuyen son cosas que solo tienen sentido si ya estás familiarizado con las limitaciones de otros sistemas. Así que voy a profundizar y echar un vistazo, explicando a medida que avanzo. Esta publicación asume que puedes estar dispuesto a actualizar tu propio sitio, pero que no haces este tipo de cosas para ganarte la vida. (No hablaré de hacer público el sitio, ya que lo cubrí en la publicación de Netlify).

Eleventy tiene lo que me gusta mucho ver: instrucciones para un inicio rápido . También utiliza Markdown directamente de fábrica. En primer lugar, supuse que tendría que actualizar mi Node.js, que parece ser la forma en que comienzo todas las cosas con JavaScript en estos días. Para mi sorpresa, después de abrir mi terminal Warp  ya tenía más de la versión 14 requerida:

Bien, tal como se me indicó, creé un directorio, creé un package.json en blanco y dejé que npm instalara lo necesario:

Genial. Ahora crearemos dos tipos diferentes de archivo de contenido (o plantilla) y veremos qué hace Eleventy con ellos. Como se me indicó, los produje en la línea de comandos.

Este primer ejemplo es HTML puro, que tal como está no necesita ningún procesamiento adicional.

Y esto es Markdown. Ejecutemos Eleventy y veamos qué hace:

Zoom

corriendo 11ty

Creó un directorio de salida _site , convirtió el Markdown a HTML y envió el index.html directamente allí. Si observamos el nuevo directorio _site , se confirma que:

Por lo tanto, trató la salida de mi archivo README.md como una nueva ruta, con su propia página de índice predeterminada. También pareció utilizar Liquid , un lenguaje de plantillas , para determinar qué hacer con los archivos.

Ahora veamos el sitio en un servidor local:

Como era de esperar, obtenemos una página en http://localhost:8080 con un solo “Hola” y una página en http://localhost:8080/README con las palabras “Encabezado de página” entre <h1>. Puedes dejar este proceso para que “cargue en caliente” las páginas nuevas y presionar Ctrl+C cuando quieras reiniciar.

De esta forma, es fácil poner en funcionamiento los conceptos básicos y los resultados son una estructura de salida sensata. Y todo esto fue lo que se explica en la guía. (También podríamos haber creado un directorio de origen de entrada).

Lenguajes de plantilla y Front Matter

Ahora, lo interesante. En el caso de un sitio web personal, queremos que nuestras páginas compartan un diseño. Queremos mantener nuestro contenido en Markdown y dejar que Eleventy haga el sitio por nosotros. Hay dos conceptos útiles que Eleventy utiliza para hacer esto.

Los lenguajes de plantilla permiten intercalar el lenguaje de salida deseado (HTML para un sitio web) con instrucciones de código. Por lo general, debemos diferenciar entre líneas que dicen “esto es código, déjelo así” y líneas que dicen “coloque el resultado de esto en la pantalla”. Como vimos, Eleventy usa la plantilla Liquid de manera predeterminada.

Así que aquí hay un Liquid simple, que muestra todos los bits:

Esta es una declaración condicional if simple que envuelve algo de HTML, que incluye una referencia. De modo que los bits de código verifican la existencia de una variable llamada username . Si esa variable existe, imprimimos este username como sugiere el HTML, usando los corchetes dobles para indicar que queremos el resultado en la pantalla. Puedo poner esto directamente en mi archivo de plantilla de origen index.html page y ejecutarlo.

Sin embargo, estará en blanco porque el nombre de usuario no existe. Pero puedo asignar uno:

Si guardas y aún mantienes el servidor en funcionamiento, verás esto en tu navegador:

Zoom

Un poco de líquido

Ahora, pasamos sin problemas al otro concepto útil que comparten todas las plantillas: front matter . Esto nos permite definir variables (o metadatos) en cualquier plantilla, como hicimos para Liquid. Si modificamos nuevamente el index.html  de la fuente , la declaración front matter también declara a David como nombre de usuario:

Y también podemos hacerlo en Markdown.

Creando el sitio web

Bien, volvamos a nuestro sitio web. Un recordatorio:

• Queremos que las páginas de nuestro sitio web utilicen un diseño.
• Pero sólo queremos escribir contenido en Markdown, no hackear HTML.

En primer lugar, le pedí a ChatGPT que “creara una plantilla HTML con una bonita imagen de un gato”.

El resultado fue el siguiente:

Si reemplazo nuestra página index.html con esta, inmediatamente vemos una linda página con un gato:

Pero queremos que esta sea nuestra página de diseño. Queremos que el título real de nuestra página aparezca donde aparece "Página de lindos gatos" y queremos colocar contenido de texto real justo debajo del gato.

Así que cambiemos el nombre de esta página del gato a layout.html y modifiquémosla para incluir las variables de plantilla Liquid que deseamos. Aquí...

…y aquí:

A diferencia del título variable, el contenido variable es un elemento especial que Eleventy rastrea. Entiende que, cuando se utiliza un diseño, todo el contenido de la página va en este lugar.

Pero si simplemente seguimos con esto, Eleventy pensará que la página de diseño es solo una ruta como README. Por lo tanto, la colocamos en una carpeta especial llamada _includes que no se creará, pero se puede hacer referencia a ella. Si limpiamos el directorio _site ( las páginas antiguas permanecerán) e ignoramos el enorme directorio node-modules , debería tener esto:

Como no se abre el archivo index.html, no se mostrará nada. Lo único que tenemos es el README antiguo.

Ahora, vamos a crear un index.md, a contarle el título, el contenido y el diseño. Para ello, utilizamos front matter:

Simple.

El resultado generado es este como página de índice:

Zoom

Nuevo gatito, nuevo peligro

Tenga en cuenta que se sirve un gatito en un lugar diferente.

Y el diseño final del directorio es:

Esto debería ser suficiente para despertar en usted el entusiasmo por escribir su propio sitio, o tal vez para desanimarlo. Sin embargo, deberá profundizar más para obtener todos los componentes interesantes de un sitio moderno, y lo haré en una publicación posterior. La moraleja, por ahora, es que Eleventy nos brinda un proceso agradable y fluido que funciona con las tecnologías existentes y al mismo tiempo nos guía hacia las buenas prácticas.