DevZeppelinBlog
Hamburger Icon
Primeros pasos con Eleventy

Primeros pasos con Eleventy

Eleventy o 11ty es un generador de sitios estáticos (SSG por sus siglas en inglés). Está hecho en JavaScript y fue desarrollado para ser la alternativa en este lenguaje a Jekyll. Es agnóstico al Framework que uses, puedes no usar ninguno o puedes usar Vue, React o cualquier otro. También trabaja con múltiples lenguajes de plantilla, como HTML, Markdown, JavaScript, Mustache o Pug entre otros.

Destaca por su flexibilidad, ya que al poder trabajar con múltiples lenguajes de plantilla podemos migrar sitios de forma incremental de manera relativamente fácil.

Finalmente, antes de empezar con Eleventy, su autor destaca que no es un framework. Aunque use JavaScript en node.js para procesar las plantillas y transformarlas en el contenido final, no te obliga a dejar ningún rastro de Eleventy en el HTML final. Uno de los objetivos es precisamente que el código final generado esté desligado de Eleventy.

Puedes leer la introducción del autor a través de su artículo de presentación.

Todo el código en este artículo lo puedes encontrar también en este repositorio de GitHub.

Empezamos con 11ty

Lo primero será instalarlo. Para ello, crearemos el directorio de nuestro proyecto y entraremos en él desde la consola de comandos.

Antes de instalar Eleventy tenemos que generar un documento package.json con el comando:

npm init -y

Esto nos generará el fichero package.json con los valores por defecto.

Una vez hecho lo anterior, ya podemos instalar Eleventy:

npm install --save-dev @11ty/eleventy

Primeros pasos con las plantillas

Una vez instalado Eleventy, lo primero es crear una plantilla. Como se ha comentado al principio de artículo, hay muchas opciones para crear una plantilla. En este caso vamos a crear una plantilla con Markdown, por lo que crearemos el archivo prueba.md:

Markdown`# Título de la página

Esta es mi primera plantilla hecha con Eleventy`

Ahora podemos ejecutar este comando para generar el sitio web en la carpeta _site:

npx @11ty/eleventy

Esto generará la carpeta prueba dentro del directorio _site. Dentro de esa carpeta prueba habrá un archivo HTML con un título y un párrafo, según el contenido de nuestra plantilla Markdown.

Pero lo que queremos es verlo en nuestro navegador, ¿verdad? Para eso tendremos que ejecutar este comando y abrir la dirección http://localhost:8080/prueba:

npx @11ty/eleventy --serve

Tenemos que ir a /prueba para ver el contenido del archivo Markdown, ya que la estructura de URL's se generará a partir de los nombres de nuestras plantillas.

Si quisiéramos añadir una página en la raíz de la URL, tendríamos que crear un fichero index.md o con cualquier otro motor de plantilla que no sea Markdown.

Creamos algunos layouts para un blog

Si queremos crear una web tipo blog o de cualquier otro tipo, seguramente no empezaremos a crear archivos a lo loco hasta tener nuestra web. Muy probablemente queramos tener algún tipo de layout que contenga otro contenido.

Podemos usar muchos lenguajes de plantilla para crear el layout: HTML, Markdown, Liquid, Haml... entre muchos otros. En este ejemplo vamos a usar JavaScript para crearlo.

Plantilla para los posts

Tendremos que crear el directorio _includes y dentro otro directorio llamado layouts. Ahí crearemos el layout post.11ty.js:

class Post {
  render({ page, title, date, content }) {
    return `
      <!doctype html>
      <html lang="es">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device.width, initial-scale=1.0">
          <title>${title}</title>
        </head>
        <body>
	  <a href="/">Volver</a>
          <h1>${title}</h1>
          <span>Escrito el ${page.date.toLocaleDateString()}</span>
          ${content}
        </body>
      </html>
    `
  }
}

module.exports = Post

Hay muchas formas de hacer esto, puedes consultar la documentación para verlo. Yo he optado por usar una clase, donde he de crear la función render que devuelve la estructura de layout que queremos para la página de un post.

Para probar que esta estructura funciona, podemos crear el directorio posts y dentro un archivo Markdown mi-primer-post.md que contenga la información básica de un post:

---
title: Este es el primer post para mi blog
date: Last Modified
layout: layouts/post.11ty.js
---

## Mi primer post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis eros in ex
venenatis aliquet nec quis mi. Curabitur nisl velit, egestas sed fermentum nec,
eleifend quis tortor. Sed dapibus tellus sed maximus vehicula. Fusce posuere semper
augue eget sollicitudin. Nulla efficitur tellus sed odio elementum placerat.
Nunc non magna sed velit mollis pharetra id eget purus. Etiam vel consectetur dui.

Donec volutpat fermentum egestas. Quisque et lacus vel orci ullamcorper porttitor
maximus a urna. Nulla non dapibus lorem, eget rhoncus elit. Nulla imperdiet, nibh
auctor consectetur blandit, orci nunc sollicitudin ligula, sit amet cursus odio
turpis in lorem. Donec leo ligula, iaculis sollicitudin rutrum non, vulputate in nisi.
Nam sagittis vehicula erat scelerisque blandit. Fusce et ultricies nulla.

Si accedemos ahora a la URL http://localhost:8080/posts/mi-primer-post/ deberíamos ver el contenido correctamente formateado.

Plantilla para la página principal

Para la página principal crearemos una plantilla que liste los artículos del blog y enlace hacia cada uno de ellos. Para poder acceder a todos los artículos que tengamos dentro de la carpeta posts, tenemos que crear una colección. Para eso debemos crear el archivo .eleventy.js en la raíz del proyecto y añadir esta función:

module.exports = (eleventyConfig) => {
  eleventyConfig.addCollection("posts", (collection) => {
    return collection.getFilteredByGlob("posts/**/*.md")
  })
}

Entonces, en la carpeta layouts crearemos el archivo home.11ty.js con este contenido:

class Home {
  render({ collections }) {
    console.log("hola")
    return `
      <!doctype html>
      <html lang="es">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device.width, initial-scale=1.0">
          <title>Mi Blog Personal</title>
        </head>
        <body>
          <h1>Listado de Posts</h1>
          ${collections.posts
            .map(
              (post) => `<li><a href="${post.url}">${post.data.title}</a></li>`
            )
            .join("\n")}
        </body>
      </html>
    `
  }
}

module.exports = Home

Solo nos faltará crear el archivo index.md en la raíz del documento llamando a la anterior plantilla:

---
layout: layouts/home.11ty.js
---

Con esto tendremos un listado con todos nuestros artículos con su respectivo enlace.

Conclusiones

Eleventy es un SSG muy parecido a Jekyll, sin haber profundizado mucho en ninguno de los dos esta es la sensación que me da. Para los que trabajamos con JavaScript se hace muy cómodo y relativamente sencillo empezar a construir algo con 11ty.

Aunque no se haya comentado en este artículo, también es posible crear paginación o menús de navegación. La documentación es bastante completa y no faltan ejemplos y tutoriales.

De bien seguro seguiré de cerca la evolución de este generador de sitios estáticos, creo que su flexibilidad y agnosticismo con otras tecnologías lo hacen perfecto para ser un buen candidato a ser uno de los grandes SSG de 2021.