Una inmersión profunda en el generador de sitios estáticos de Eleventy

Pero primero, repasemos rápidamente qué se entiende por "sitio estático" y luego qué proporciona un generador. Un sitio estático se compone de contenido estático, como en HTML, CSS, activos y todo el contenido ya están compilados juntos antes de enviarse a un host de sitio web. Esto es diferente de un sitio dinámico que compila esas cosas al consultar una base de datos en tiempo de ejecución (como WordPress) o que extrae contenido de las API del lado del cliente (como marcos de JavaScript sin representación del lado del servidor).

Un generador de sitios estáticos es un entorno y un procesador de compilación para compilar su contenido en HTML estático. Por lo general, ofrecen ayudantes para brindar flexibilidad al escribir su contenido (como admitir Markdown) e incluyen métodos para la creación de plantillas. Entonces, en lugar de escribir páginas HTML una por una y tener que copiar y pegar las partes repetidas, un generador admitirá dividir esas cosas en componentes a través de un determinado lenguaje de plantillas. Luego, el proceso de compilación del generador reunirá todo y generará el HTML final que se puede cargar en un servidor web para servir como su sitio web. Dependiendo del host web que utilice, este proceso de compilación puede incluso ser realizado por el host.

Hay muchos generadores de sitios estáticos disponibles. Es posible que hayas oído hablar o incluso usado algunos como Jekyll, Hugo, Gatsby, Next y Nuxt. Jamstack.org proporciona una lista completa.

¿Qué diferencia a Eleventy de otros generadores de sitios estáticos?

Eleventy es excepcionalmente rápido tanto durante la compilación como en el navegador. Esto se debe en gran parte a que no requiere la carga de un paquete de JavaScript del lado del cliente para servir contenido (en comparación con algo como Gatsby). La representación del lado del servidor ni siquiera es una preocupación aquí, ya que la creación de la página del sistema de archivos está predeterminada en HTML estático.

Lo que realmente hace que Eleventy sea único es la capacidad de seleccionar y entremezclar hasta diez lenguajes de plantillas diferentes:

La mezcla de idiomas puede ocurrir en el mismo archivo o entre diseños. Por ejemplo, a menudo escribo mi contenido principal con Markdown que alimenta un diseño de Nunjucks. En algunos proyectos, me resultó útil poder recorrer algunos datos usando Nunjucks mientras estaba en el archivo Markdown. Esta capacidad de combinar idiomas es muy poderosa y le permite diseñar un flujo de trabajo de escritura y creación que funcione mejor para usted y su proyecto.

Eleventy incluye un indicador --serve que usa BrowserSync para habilitar el servicio del sitio localmente y con recarga en caliente cuando se realizan cambios en el archivo. Esta es una gran conveniencia, y es bueno tenerla en cuenta si no está buscando un generador de sitios estáticos, sino quizás una actualización de herramientas de compilación como Gulp.

Como parte de la configuración cero, todos los archivos de su sitio podrían vivir en la raíz de su proyecto. Para modificar los directorios de entrada y salida, puede crear una configuración de Eleventy, que se espera que sea un archivo raíz llamado .eleventy.js . Aquí hay un fragmento rápido que muestra cómo hacer esta modificación:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Como se señaló anteriormente, el comportamiento predeterminado es la creación de páginas del sistema de archivos, lo que generalmente es de gran beneficio, especialmente para comenzar rápidamente. Esto se puede anular fácilmente asignando un permalink personalizado y eso se puede hacer por archivo, para un directorio completo o dinámicamente para un conjunto de datos. ¡Los enlaces permanentes también ofrecen otro superpoder que exploraremos en un momento!

Excepcionalmente, durante la compilación, puede preparar contenido, datos y transformaciones en ese contenido y datos usando JavaScript y aprovechando filtros y códigos abreviados (hablaremos de eso más adelante). Nuevamente, todo esto sucede sin agregar un paquete de JavaScript en el lado del cliente, al tiempo que permite el uso de JavaScript como lenguaje de plantillas.

Nota importante : puede usar Eleventy con éxito con poco o ningún conocimiento de JavaScript.

A diferencia de otros SSG como Gatsby o entornos como WordPress, la mayoría de los sitios de Eleventy no requieren complementos. Hay algunos complementos disponibles, pero no son necesarios para la funcionalidad esencial.

Al construir con Eleventy, puede agregar características a medida que las necesite. De hecho, podría simplemente usar HTML y nunca trabajar con ninguno de los otros lenguajes de plantillas. ¡Eleventy es tan complejo como lo requiera su proyecto!

Comprender los conceptos esenciales de Eleventy

Repasemos algunos términos y conceptos que te ayudarán a tener éxito en la creación de tus proyectos Eleventy.

Diseños y plantillas

Puede pensar en estos términos como intercambiables, pero en el contexto de Eleventy, tienen significados contextuales:

• Plantilla es el término genérico para todos los archivos de contenido.
• Los diseños son plantillas especiales que envuelven otro contenido.

Por ejemplo, plantilla se refiere a todos sus archivos Markdown, mientras que un diseño puede ser un archivo Nunjucks que contiene el modelo HTML5 y una ranura para el contenido de la plantilla. Aprenderemos cómo hacer que esto funcione en la sección sobre cómo empezar.

Filtros y códigos cortos

Estas son formas adicionales de modificar la salida de contenido y crear partes de plantilla reutilizables. Están disponibles para su uso con plantillas Nunjucks, Liquid, Handlebars y JavaScript. Los filtros y códigos abreviados se definen dentro de .eleventy.js .

Más allá de las variables y los operadores disponibles en el lenguaje de plantillas de su elección, Eleventy ha unificado el concepto de filtros en los idiomas enumerados anteriormente. Los filtros transforman el contenido de alguna manera específica para el tipo de contenido. Por ejemplo, puede crear un filtro destinado a las cadenas para ponerlas en mayúsculas. O puede tener un filtro destinado a usarse en matrices para modificar lo que se devuelve, como elegir un elemento aleatorio. Eleventy proporciona algunos filtros, algunos de los cuales usaremos en el tutorial de introducción.

Los códigos cortos permiten crear partes de plantillas reutilizables y pueden aceptar argumentos. Pueden ser independientes o emparejados, lo que significa que envuelven el contenido con una etiqueta de inicio y fin.

Uno de mis shortcodes favoritos es representar el año actual, lo que significa que no más años de derechos de autor desactualizados en su pie de página. Aquí se explica cómo crear un shortcode de year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Para usarlo en una plantilla de Nunjucks o Liquid se ve así: {% year %} .

Puede revisar los documentos de Eleventy para ver ejemplos de códigos abreviados emparejados.

Colecciones

Las colecciones son grupos de contenido relacionado y, por lo general, se crean dentro de frontmatter mediante la definición de tags . Las opciones de sintaxis de etiquetas incluyen cadenas individuales, matrices de una sola línea ( ["tagA", "tagB"] ) para múltiplos o listas de estilo YAML para asignar varias etiquetas. Por ejemplo, puedo crear una colección de "páginas" agregando el siguiente contenido a todo el contenido que quiero incluir en esa colección:

 --- tags: pages ---

Una vez que haya definido una colección, puede acceder a ella a través del lenguaje de plantillas de su elección dentro del objeto de collections globales. Para acceder a nuestra colección de "páginas" se vería como collections.pages . Esto devuelve una matriz de los datos de esa colección, por lo que puede realizar operaciones de matriz como recorrerla para producir una lista de enlaces o tarjetas de presentación de artículos. Incluso puede suprimir la salida normal de archivos y usar solo colecciones para administrar la visualización de datos, lo cual es útil para administrar el contenido del sitio de una sola página.

Datos personalizados

Hasta ahora hemos hablado sobre la creación de contenido como archivos, pero Eleventy también facilita el mantenimiento de diferentes fuentes de datos. Esto se llama "datos personalizados" y vive como exportaciones de módulos de JavaScript o archivos JSON en el directorio _data .

Los datos personalizados se pueden utilizar para:

• Defina una matriz JSON básica.
• Devuelve los resultados de una operación de obtención.
• Recupere y vuelva a formatear el contenido de un CMS sin encabezado.

Eleventy hace que todos los datos de _data estén disponibles bajo una variable que coincida con el nombre del archivo. Por ejemplo, si creo posts.json , puedo acceder a eso en mis plantillas como posts . Usando Nunjucks, aquí hay un ejemplo de bucle sobre los datos de las posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

Paginación y creación de páginas a partir de datos

En términos de Eleventy, la paginación se refiere a iterar sobre un conjunto de datos y definir una plantilla para la salida de ese "fragmento" de datos. Esto se hace con un archivo dedicado que define la paginación dentro de frontmatter. El archivo también incluye la configuración de la salida prevista para los datos, lo que significa que también se convierte en su propia plantilla. Podemos definir un diseño para enviar el contenido y también agregar etiquetas para crear una colección para facilitar la referencia y flexibilidad para la salida.

Nota : si usa datos personalizados para recuperar contenido de un CMS, entonces la paginación es el método de Eleventy que está buscando para convertir esos datos en páginas de forma dinámica.

Aquí hay un ejemplo de cómo hacer referencia a los datos personalizados de nuestras posts que asumiremos que estamos recuperando a través de una búsqueda de un CMS sin cabeza. Es importante destacar que el size se establece en 1, lo que significa que cada "fragmento de paginación" debe producir una sola página de salida. Luego usamos el alias para crear una referencia al elemento actual en el ciclo de paginación y luego usamos esa referencia en la definición del permalink y el cuerpo de la plantilla.

El archivo que define la paginación puede vivir donde quieras dentro de tu directorio de entrada. Mi preferencia organizacional es crear un directorio de generate y luego nombrarlo de la misma manera que la colección que creará. Considere lo siguiente como src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

En este caso, el permalink asigna la salida de la página directamente desde la raíz del sitio. Puede cambiar esto para agregar un prefijo como /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , por ejemplo.

Además, si desea que todas las páginas generadas estén disponibles en la colección creada por las etiquetas, debe establecer addAllPagesToCollections en true para incluir más del primer elemento.

Por último, si su contenido llega como Markdown en lugar de HTML precompilado, deberá usar templateEngineOverride . En el fragmento de código de ejemplo, lo configuré en njk, md lo que significa que el contenido de la plantilla deberá procesarse como Nunjucks para convertir la variable y luego Markdown para compilar los contenidos devueltos en la variable.

Si se pregunta qué significa safe , ¡lo aprenderemos a continuación!

Cómo empezar con Eleventy

Muy bien, ¡entonces estás listo para comenzar con tu primer proyecto Eleventy! Este breve tutorial lo ayudará a obtener una estructura inicial para continuar construyendo. Usaremos los conceptos que ya hemos aprendido y también agregaremos algunas ideas nuevas.

La primera nota importante aquí es que Eleventy es un paquete con alcance, así que aquí está el comando de instalación:

 npm install @11ty/eleventy

A continuación, una conveniencia práctica que me gusta hacer es agregar los siguientes scripts en mi package.json :

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

Como se mencionó anteriormente, el indicador --serve habilitará un servidor local a través de BrowserSync.

Mi preferencia es actualizar los directorios de entrada/salida como ya vimos, así que ahora es el momento de crear algún contenido dentro de src o el directorio de entrada de su elección.

Para preparar nuestro proyecto para que sea más flexible y escalable desde el principio, sugeriría crear al menos un diseño que contenga el modelo HTML5. Los diseños deben definirse dentro de un _includes llamado directamente, que es uno de los pocos directorios esperados.

Una convención que a menudo encontrará entre los principiantes es llamar a este diseño base . Tengo preferencia por convertirlo en un archivo Nunjucks.

Aquí hay un ejemplo de base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

Las llaves dobles son sintaxis Nunjucks para variables. Aquí, nos hemos preparado para una variable de title entrante que se proporcionará en breve a través de Front Matter. La variable de content es proporcionada por Eleventy y marca el espacio donde debe ir todo el contenido entrante que no sea de primera plana. Es importante destacar que esto se usa junto con el filtro safe proporcionado que evita que el HTML compilado se escape en lugar de renderizarse.

Ahora es el momento de crear el índice de nuestro sitio, que agregaremos como index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Tenga en cuenta que en la parte delantera agregamos nuestro título y también definimos el diseño.

En este punto, podemos ejecutar nuestro proyecto con el script que agregamos: npm start . Esto activará BrowserSync para configurar localhost:8080 (si está disponible), pero deberá abrirlo manualmente en el navegador. Consulte este consejo rápido si desea que se abra el navegador automáticamente.

El último paso crítico es agregar una hoja de estilo. Actualmente, CSS no se reconoce como un tipo de archivo incluido automáticamente, por lo que tendremos un paso de configuración adicional después de crear nuestra hoja de estilo.

Puede agregar un archivo CSS donde desee en su directorio de entrada, como css/style.css . Luego, abra .eleventy.js (o créelo en la raíz del proyecto si no realizó la personalización de entrada/salida) y agregue lo siguiente:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Primero, agregamos el directorio css como una "copia de paso", lo que significa que Eleventy debe incluirlo en el directorio de salida. Luego, también lo agregamos como un "objetivo de observación" para que, a medida que hacemos cambios en nuestros estilos mientras ejecutamos nuestro comando de start , Eleventy active una reconstrucción para actualizar nuestro sitio local.

Por último, debemos recordar agregar el enlace a nuestra hoja de estilo dentro de nuestro diseño base :

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Cuando definimos la ubicación de la hoja de estilo, la pasamos a través del filtro de url de Eleventy, que ajustará la ruta de archivo relativa según sea necesario durante la compilación.

A continuación, creemos un tipo de publicación de "páginas" para explorar un poco más el uso de colecciones y diseños. Para hacer esto, agregue el directorio de pages y cree uno o dos archivos Markdown, incluida una clave principal de title pero no un diseño.

Vamos a utilizar un método ligeramente diferente para definir el diseño esta vez: un archivo de directorio de datos . Este archivo generalmente tiene el formato JSON y nos permite agregar datos que deben aplicarse a todos los archivos dentro de un directorio, lo que evita tener que duplicarlos en todos los archivos. El archivo debe tener el mismo nombre que el directorio para el que se usará, así que cree el archivo pages.json y agregue el siguiente contenido:

 { "layout": "page.njk", "tags": "pages" }

También nos adelantamos y definimos etiquetas para crear la colección de "páginas". Pero el diseño que definimos aún no existe, así que cree _includes/page.njk y agregue lo siguiente:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Aquí estamos usando el concepto Eleventy de encadenamiento de diseño para poder reutilizar nuestra plantilla base pero también agregar un elemento único para nuestro diseño de page , que es el <article> . Esto significa que todo el contenido de nuestras páginas utilizará tanto el diseño de page como los diseños base .

El encadenamiento de diseños reduce la duplicación al permitir la reutilización de plantillas y estructuras de diseño del sitio base.

Ahora que hemos creado contenido para el tipo de contenido de pages y lo hemos definido como la colección de "páginas" a través de las etiquetas, veamos cómo podemos acceder a esa colección. Aquí, usaremos Nunjucks para recorrer la colección y generar una lista de enlaces a cada página. Este bucle se agregará dentro de nuestro archivo index.md .

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

Sin embargo, hemos hecho algo único, que es que el interior del bucle en realidad cambia de nuevo a Markdown para representar los enlaces. Esta no es una forma obligatoria de manejar este escenario, ¡pero puede ser muy útil! A veces, dependiendo de la complejidad, esto puede no funcionar. La verdadera razón es que el renderizador de Markdown tiene como valor predeterminado el lenguaje de plantillas Liquid , por lo que si está utilizando funciones de Nunjucks más allá de los bucles básicos, deberá informar a Eleventy cómo procesar el archivo.

En la sección anterior sobre paginación, ya vimos la solución para esto. Y eso es hacer uso de templateEngineOverride para indicar que el archivo debe procesarse como Nunjucks y Markdown. La siguiente solución completa debe colocarse en el frente de la plantilla: templateEngineOverride: njk, md .

¡En este punto, ha creado un sitio básico de varias páginas! Si necesita usar datos externos, vuelva a la sección de paginación.

Otras formas de iniciar un proyecto Eleventy

Mientras que otros generadores de sitios estáticos y entornos como WordPress tienen el concepto de "temas", Eleventy usa el término "iniciador". Hay una colección cada vez mayor para elegir, y muchos se pueden encontrar en la lista dentro de los documentos de Eleventy.

Mi preferencia es usar Sass con mis proyectos de Eleventy, y tengo un iniciador de Sass disponible si desea ver cómo agregarlo a su proceso de compilación. Otros pueden optar por agregar Gulp si están acostumbrados a esa canalización de compilación para activos y procesamiento.

También creé un iniciador mínimo que incluye las características discutidas en este artículo y comparte similitudes con el resultado del tutorial. También tiene un pequeño ejemplo de obtención de datos externos y muestra cómo agregar un parcial para mostrar la navegación del sitio en función de una colección.

Ampliando lo básico

Una vez que haya experimentado con la creación de su primer sitio con algún contenido básico y tal vez algunos datos personalizados, es útil conocer formas adicionales de trabajar con ese contenido. Aquí hay una breve descripción de algunos otros conceptos a tener en cuenta.

Alteración del tipo de archivo de salida con enlaces permanentes

Mencioné anteriormente que los enlaces permanentes tienen un superpoder. Y eso es que puede usarlos para generar tipos de archivos que no sean HTML.

Dos ejemplos útiles son la creación de una fuente RSS y un mapa del sitio, los cuales suelen ser archivos XML. Lo que es realmente poderoso es que puede continuar usando el lenguaje de plantillas de su elección para ayudar a generar esos archivos, por lo que puede recorrer los datos de la página con Nunjucks para mantener su fuente RSS actualizada, por ejemplo.

Personalización de colecciones

A veces, usar etiquetas para crear colecciones puede no ser suficiente. O bien, puede que desee crear variaciones filtradas de una colección existente. Podemos modificar o crear colecciones utilizando una serie de funciones proporcionadas. Estos vivirán en el archivo de configuración .eleventy.js .

En este ejemplo, usamos la función addCollection para filtrar elementos en una colección existente. La nueva colección se basará en la existencia de customKey dentro de la materia prima. Esta clave se devuelve del objeto de data que se adjunta a todo el contenido generado de Eleventy.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Puede revisar otras formas de crear, modificar y usar colecciones en los documentos de Eleventy.

Trabajar con la cascada de datos

Eleventy tiene un concepto más completo de cómo se compilan los datos para una plantilla llamada cascada de datos que recién comenzamos a explorar en esta guía. Obtendrá el máximo provecho de Eleventy si revisa cómo funciona, comenzando en los documentos. Ben Myers también tiene una excelente guía para comprender la cascada de datos.

Complementos recomendados de Eleventy

En la introducción, mencioné brevemente que había complementos disponibles, pero que no siempre son necesarios. Sin embargo, hay algunos que tiendo a usar en la mayoría de los proyectos, que incluyen:

• @11ty/eleventy-plugin-rss Si desea tener una fuente RSS, este complemento oficial proporciona algunos filtros para ayudarlo a generar la fuente. El repositorio vinculado incluye un feed de muestra, que también puede encontrar en uso dentro de algunos principiantes.
• @11ty/eleventy-plugin-syntaxhighlight En lugar de cargar Prism como un script para resaltar código, este complemento permite que ese procesamiento se aplique como parte del proceso de compilación de Eleventy. Esto significa que los bloques de código se transforman para incluir las clases para aplicar un tema Prism con anticipación, por lo que solo necesitará agregar un tema Prism CSS de su elección.
• @11tyrocks/eleventy-plugin-social-images Una característica que busqué al principio de mi exploración de Eleventy fue la capacidad de generar imágenes para compartir en las redes sociales. Esto me llevó a crear un complemento que usa Titiritero detrás de escena para tomar la instantánea. El complemento viene con plantillas prediseñadas, así como opciones de configuración para definir su propio archivo de plantilla.

También recomendaría familiarizarse con el resto de los complementos oficiales de Eleventy, ya que abordan otras necesidades comunes, incluida la navegación y el manejo de imágenes.

Decidir si Eleventy es adecuado para su proyecto

Eleventy, como la mayoría de los sitios estáticos, es mejor para el contenido que normalmente no necesita ser servido dinámicamente o bajo demanda. Esto no quiere decir que todo el sitio tenga que ser estático, o que no haya formas de hacer que el contenido sea dinámico. Todavía puede cargar JavaScript para habilitar contenido dinámico como la obtención de API o la creación de widgets interactivos. También puede usar servicios como IFTTT o Zapier para facilitar la reconstrucción de su sitio si su host admite la creación de webhooks y tiene partes que desea actualizar según un cronograma.

Gracias a los datos personalizados y la paginación, vimos que era fácil incluir datos externos como desde un CMS sin cabeza o cualquier otra API. Entonces, aunque se servirá de forma estática, aún tiene mucha flexibilidad en cuanto a dónde obtiene el contenido y cómo lo administra.

Lo que más me gusta de Eleventy es que no impone muchas opiniones sobre cómo debo estructurar mi sitio, más allá de los pocos directorios esperados de los que hablamos para _includes y _data (y también puede actualizar la convención de nomenclatura de esos). Esto también puede ser útil si está buscando migrar un sitio y también puede mover potencialmente alguna estructura de archivo existente. Sin embargo, si prefiere una arquitectura más obstinada, puede buscar una opción diferente.

También disfruto cómo puedo moldear Eleventy para que se ajuste a mi modelo mental para un proyecto determinado aprovechando múltiples lenguajes de plantillas, así como filtros, códigos abreviados y diseños. Los entrantes también ayudan a dar un impulso para que pueda concentrarse en lo que es realmente importante: su contenido. Y el alto rendimiento de la salida puramente estática también es un gran beneficio.

Si necesita un poco más en su proceso de compilación, puede agregar otras herramientas familiares como Webpack, Gulp o Parcel. Es posible que pueda encontrar un iniciador que ya incluya esas cosas. Tenga en cuenta que también puede aprovechar los scripts de Node que ya son inherentes al proceso de compilación de Eleventy.

Eleventy es muy capaz de manejar grandes cantidades de generación de páginas. Se ha utilizado para algunos sitios grandes y complejos, como web.dev de Google y el sitio de marketing de Netlify. También he usado Eleventy para algunos propósitos no convencionales, como generadores de correo electrónico y componentes web, junto con algunos otros que se describen en esta descripción general.

Recursos adicionales

¡Espero que esta guía haya despertado su interés y lo haya preparado para comenzar a usar Eleventy! Incluía muchos puntos que encontré un poco complicado de descubrir cuando estaba creando mi primer proyecto con él. Desde que encontré Eleventy por primera vez en abril de 2020, construí más de 20 proyectos de Eleventy, incluidos los iniciales, los complementos, los proyectos paralelos y los materiales del curso. Muchos de ellos se pueden encontrar en mi sitio 11ty.Rocks, que también tiene tutoriales y consejos. Eleventy es algo que realmente disfruto discutir, ¡así que siéntete libre de contactarnos en Twitter!

Los siguientes son más recursos para ayudarlo en su viaje para aprender y aprovechar al máximo Eleventy:

• Andy Bell ofrece un curso pago muy completo: "Learn Eleventy From Scratch".
• La serie de tutoriales de Tatiana Mac, que comienza con la "Guía para principiantes de Eleventy", brinda explicaciones detalladas que no presuponen experiencia previa con generadores de sitios estáticos.
• Bryan Robinson ofrece un curso de YouTube para convertir un tema HTML gratuito en un sitio de Eleventy.

Finalmente, quiero señalar que la comunidad de Eleventy es pequeña pero activa. Si alguna vez tiene dificultades para encontrar alguna información, puede twittear su pregunta a la cuenta oficial @eleven_ty. El creador de Eleventy, Zach Leatherman, responde rápidamente o da RT a las preguntas para ayudarlo a volver a su camino.