Un breve recorrido por el generador de sitios estáticos de Eleventy

Los generadores de sitios estáticos son muyA la moda¡En estos momentos y con JAMStack convirtiéndose en una alternativa más que viable para muchos proyectos web, no es de extrañar!

Con JAMStack o sin él, los generadores de sitios estáticos (SSG) ofrecen algunas ventajas importantes en comparación con los CMS más tradicionales y, cuando se trata de SSG, hay muchas opciones para elegir. Jekyll, Hugo, Gatsby, Next.jst, Sapper... ¡Dios mío!

Hace poco estuve buscando cuál sería mi mejor opción de generador de sitios estáticos para un proyecto mío llamado Spiral11. Al principio me inclinaba por Gatsby porque incluye algunas ventajas modernas como la optimización de imágenes, pero luego miré más de cerca a Eleventy y me enamoré.

11ty es fácil de usar, no interfiere en tu trabajo y te muestra exactamente lo que escribes, por lo que no hay sorpresas ni código oculto. En su forma más básica, 11ty simplemente compila los archivos que encuentra en tu directorio de trabajo en archivos HTML estáticos. Además, como está escrito en JavaScript, obtienes acceso a todos los npmpaquetes que puedes usar en tu proyecto.

Hagamos un recorrido y veamos cómo funciona…

Configuración del sitio de Eleventy

Comience instalando Eleventy globalmente en su máquina usando npm o Yarn:

# with npm$ npm install -g @11ty/eleventy# with Yarn$ yarn global add @11ty/eleventy

Ahora puede ejecutar el eleventycomando en cualquier directorio que contenga archivos de plantilla válidos.

Por ejemplo, digamos que tenemos un directorio llamado best-site-ever, con un index.mdarchivo en él:

índice.md

## Chomp Chomp **Chomp**  

Ahora puedes ejecutar eleventyen ese directorio, verás que Eleventy crea un _sitedirectorio con un index.htmlarchivo que contiene lo que esperamos:

_sitio/index.html

h2Chomp Chomp strongChomp/strong  /h2

Hablando de lenguajes de plantillas, tienes muchas opciones. Puedes usar Markdown, Nunjucks, Liquid, Mustache... Y puedes mezclar y combinar, por lo que puedes tener algunos archivos escritos en Liquid y otros en Nunjucks y Eleventy se encargará de todo perfectamente.

once opciones de comando

El eleventycomando también acepta algunas banderas útiles. Por ejemplo:

• -mirar:Reescribe los archivos de salida cuando cambie alguno de los archivos de tu proyecto.
• -atender:Servir el sitio generado a través de un servidor web local y observar los cambios.
• –ejecución en seco:Pruebe el procesamiento sin generar ningún archivo.
• -producción:Especifique una ubicación de salida diferente.

Esto significa que muy a menudo, cuando se trabaja localmente, querrá servir y reconstruir los cambios con el siguiente comando:

$ eleventy --serve

Estructura del directorio

Con Eleventy no solo eres libre de elegir tu idioma de plantilla favorito, sino que también puedes elegir tu propia estructura de directorio.

Digamos que tenemos otro archivo Markdown en nuestro proyecto, pero esta vez está en dos subdirectorios anidados:

/uno/dos/blog-post.md

One day *I will write* my 1st blog post!

Ahora, si ejecutamos eleventy, la salida _sitese verá así:

  _site/  index.html    one/      two/        blog-post/        index.html

Notarás que se conserva la estructura del directorio, que el nombre del archivo se utiliza como slug/URI y que Eleventy crea un directorio para cada plantilla generada con un archivo index.html dentro que contiene la salida HTML.

¿Qué sucedería si quisiéramos que nuestros archivos se organizaran en directorios que se reflejaran de manera diferente en el resultado final? Fácil, podemos simplemente especificar el enlace permanente para una plantilla en particular dentro de una sección preliminar en la parte superior.

/uno/dos/blog-post.md

---permalink: '/blog-post/'---One day *I will write* my 1st blog post!

Simplemente ejecútelo eleventynuevamente y verá que ahora blog-postaparece en el nivel raíz en _site. De esta manera, especificar un enlace permanente le permite una flexibilidad total.

Materia preliminar

Hablando de la portada, puedes poner todo tipo de metadatos en ella, que luego estarán disponibles para los diseños (más sobre esto más adelante). Es en la portada, por ejemplo, donde especificarás cosas como el título, la meta descripción/extracto y las etiquetas para una publicación, y la mayoría de las claves pueden tener el nombre que quieras.

He aquí un ejemplo para ilustrarlo:

/uno/dos/blog-post.md

---title: "My first blog post  "date: 2020-04-02excerpt: "This post talks about how one day I'll write a 1st post."permalink: '/blog-post/'emotion: happytags:  - blog  - getting-started---One day *I will write* my 1st blog post!

Colecciones

No profundizaré demasiado en el tema aquí y te invito a leer la documentación para obtener más información, pero Eleventy usa las etiquetas que proporcionas en la introducción para completar colecciones, que se pueden iterar en otras plantillas como, por ejemplo, páginas de categorías.

También hay una colección especial llamada allque, de manera predeterminada, incluye todas las publicaciones. Con esta allcolección, es posible que termines con algo así como un mapa del sitio que incluye publicaciones o páginas que no quieres, por lo que existe una manera sencilla de optar por no incluir una publicación o página en las colecciones:

---eleventyExcludeFromCollections: true---

Diseños

Hasta ahora, lo que hemos hecho es simplemente generar HTML a partir de los archivos Markdown que hemos creado. Sin embargo, la mayoría de las veces, dichos archivos Markdown deben incluirse en un diseño para proporcionar elementos como el código HTML estándar, el encabezado, la barra de navegación, la barra lateral y el pie de página.

De forma predeterminada, las plantillas de diseño deben residir en el _includesdirectorio.

Vamos a crear algunos diseños de muestra utilizando la sintaxis de Nunjucks. Uno será el diseño predeterminado con nuestro código HTML y el otro será el diseño de nuestro blog:

_incluye/predeterminado.njk

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  title{{ title }} | My Site/title/headbody   {{ content | safe }}/body/html

_incluye/blog.njk

---layout: default---h1{{ title }}/h1div  Published on {{ date }}/divarticle  {{ content | safe }}/article

Como puede ver, un diseño puede llamar a otro diseño y nuestros diseños pueden acceder a los datos que se encuentran en la parte frontal de nuestros archivos de plantilla habituales.

Podemos utilizar un diseño especificándolo en la introducción de cualquiera de nuestras plantillas de contenido:

---layout: blog.njktitle: "My first blog post  "date: 2020-04-02excerpt: "This post talks about how one day I'll write a 1st post."---One day *I will write* my 1st blog post!

Configuración de Eleventy

Hasta ahora hemos hecho todo sin siquiera tocar un archivo de configuración, y esto demuestra lo simple que es usar Eleventy. Pero a medida que tu sitio web se vuelve más complejo, seguramente querrás poder configurar algunas opciones de configuración. Puedes hacerlo en un .eleventy.jsarchivo en la raíz de tu proyecto.

Aquí hay un archivo de configuración de muestra que copia nuestros activos estáticos al directorio de salida y especifica un nombre de directorio de salida diferente ( public):

.eleventy.js

module.exports = eleventyConfig = {  // Copy our static assets to the output folder  eleventyConfig.addPassthroughCopy('css');  eleventyConfig.addPassthroughCopy('js');  eleventyConfig.addPassthroughCopy('images');  // Returning something from the configuration function is optional  return {    dir: {      output: 'public'    }  };};

Puedes hacer todo tipo de cosas en tu archivo de configuración, como minimizar la salida HTML, usar complementos y configurar códigos cortos. Nuevamente, te invito a que mires la documentación para obtener más información sobre lo que se puede configurar. Pero si comienzas a sentirte abrumado al principio, solo recuerda que, de manera predeterminada, Eleventy ni siquiera necesita un archivo de configuración y puede hacer la mayor parte del trabajo pesado sin uno.

Usando un iniciador

Hasta ahora hemos estado creando un sitio desde cero para ver cómo funcionan las cosas, pero a menudo querrás empezar con una buena base que ya esté configurada y/o diseñada de la forma que te guste. Puedes buscar en una lista de 11ty starters aquí.

Personalmente, me gusta mucho el iniciador de Skeleventy, que utiliza Tailwind CSS para el estilo y está configurado con PurgeCSS para eliminar los estilos no utilizados en producción. Si estás iniciando un blog, el iniciador de blog oficial de Eleventy también sería un buen lugar para empezar.

Aprendiendo más

✨✨Eso es todo por esta breve introducción, pero te invito a aprender más consultando estos recursos:

• Los documentos oficiales
• Este episodio de Learn With Jason con Zach Leatherman, el creador de Eleventy