Agencia de desarrollo oneCommerce

Sitios estaticos con eleventy: Creando un blog

diseño web
eleventy
desarrollo

Olvidate de la complejidad y diseña paginas web modernas con eleventy, el generador de sitios estaticos mas simple e intuitivo.

Sitios estaticos con eleventy: Creando un blog

Es indudable que los generadores de sitios estaticos (Jamstack) estan ganando popularidad y se estan convirtiendo en la opción perfecta para crear toda clase de webs.

Existen diferentes herramientas (Hugo, Gatsby, Jekyll, VuePress) para facilitar la tarea de generar paginas web complejas y entre ellas destaca eleventy.

Eleventy se caracteriza por la simplicidad de uso y la flexibilidad. Es el generador estatico usado en web.dev, developer.chrome.com, netlify, entre otros.

La mejor forma de aprender a utilizar eleventy es usandolo, asi que vamos a crear un blog y repasar algunos conceptos importantes.

Contenido:

¿Que es eleventy?

Eleventy es un generador de sitios estaticos simple (asi lo definen en la pagina oficial) de codigo abierto.

Es tan sencillo de usar que el proyecto más basico solo requiere tres comandos para comenzar a trabajar.

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

Eleventy no requiere ningun tipo de configuración para funcionar pero es posible adaptarlo a todo tipo de situaciones gracias al soporte para multiples lenguajes de plantillas.

Documentacion eleventy
Algunos de los lenguajes de plantillas que puedes usar con eleventy

Instalando eleventy

Vamos a crear el directorio de nuestro proyecto e instalar eleventy. Abre una ventana de terminal y ejecuta los siguientes comandos.

Es necesario tener instalado Node para poder ejecutar eleventy.

mkdir blog
cd blog
npm init -y
npm install @11ty/eleventy

Estructura del blog

Una ventaja importante de eleventy es que no te obliga a usar ninguna estructura de directorios por lo que nosotros vamos a definir como organizar nuestros archivos.

Existen repositorios llamados starter-projects que contienen una estructura ya predefinida y pueden ayudarte a empezar tu nuevo sitio.

Documentacion eleventy
Proyectos iniciales

Como nuestro proyecto no es grande vamos a usar una estructura personalizada bastante simple:

// Estructura del blog

- _includes
|   base.liquid
- posts
|   entrada-1.md
|   entrada-2.md
- pages
|   home.liquid
|   blog.liquid
- images
|   imagen-1.jpg
|   imagen-2.jpg
- .eleventy.js
- package.json

La carpeta _includes es donde almacenamos las plantillas que utilizamos en el proyecto. Puedes configurar el nombre de la carpeta, pero por el momento usaremos la que esta predefinida.

Dentro de _includes añadimos un archivo nuevo llamado base.liquid que va a funcionar como nuestra plantilla principal.

En la carpeta posts vamos a crear las entradas del blog utilizando markdown. Eleventy va a utilizar el contenido de estos archivos para crear las paginas correspondientes.

En pages vamos a crear las paginas individuales que componen a nuestro sitio. Por ahora solo vamos a incluir una pagina principal y la pagina del blog con un listado de nuestras entradas.

La carpeta images va a contener nuestras imagenes.

El archivo .eleventy.js es donde definimos la configuración de eleventy usando javascript.

Documentacion eleventy
La estructura de nuestro blog

Plantilla base del blog

Utiliza un editor de textos para añadir el siguiente contenido a la plantilla base. Como puedes ver solamente es una pagina basica que acepta el contenido de nuestros archivos markdown.

<html>
    <head>
        <title> {{ title }} - Mi blog </title>
    </head>
    <body>
        {{ content | safe }}
    <body>
</html>

Los posts de nuestro blog van a utilizar esta plantilla al momento de la compilación.

La plantilla base utiliza Liquid pero con eleventy no estas limitado a un solo lenguaje. Puedes usar Nunjucks, Handlebars, Mustache, Pug, Javascript, entre otros.

Entradas del blog

En la carpeta de posts vamos a almacenar todas nuestras entradas.

No es necesario utilizar markdown para escribir el contenido de nuestro blog pero es facil de eidtar y es adecuado para nuestro blog.

Creamos un nuevo archivo llamado "entrada-1.md" con el siguiente contenido:

---
title: Entrada 1
---

# Entrada del blog 1

Esta es la primer entrada de nuestro blog. Esta hecha con markdown.

Añadimos una entrada más con este contenido:

---
title: Entrada 2
---

# Entrada del blog 2

Esta es nuestra segunda entrada.

Pagina de inicio

En la pagina de inicio queremos mostrar un mensaje de bienvenida y una lista de las entradas más recientes por lo que vamos a hacer uso de las colecciones de eleventy.

El contenido de home.liquid es el siguiente:

---
layout: "base.liquid"
title: "Bienvenidos"
permalink: "/"
---

<h1> Bienvenidos a nuestro blog! </h1>
<p> Esperamos que te gusten nuestras entradas </p>

{% for post in collections.all %}

    <h2> {{ post.data.title }} </h2>
    <a href="{{ post.data.permalink }}"> Leer más </a>

{% endfor %}

Front matter

El front matter es un bloque en formato YAML al principio del archivo y contiene variables a las que puede acceder eleventy o nuestras plantillas.

En la plantilla base de nuestro sitio utilizamos la variable title definida en el front matter de la pagina home.liquid.

Eleventy utiliza la variable layout para determinar que plantilla base utilizar a la hora de generar el contenido.

La variable permalink es usada por eleventy para determinar la URL del contenido una vez generado el sitio.

Eleventy es tan flexible que puedes usar Javascript para definir variables en el front matter.

Documentacion eleventy
Ejemplo de javascript en el front matter

La colección "all"

Eleventy solo procesa los archivos con un formato reconocido y despues los añade en conjuntos llamados colecciones y los hace disponibles a todas las paginas.

Esta caracteristica nos permite acceder a todas las entradas con formato markdown que proceso eleventy.

Generando el sitio

Para poder visualizar los cambios que hacemos en el sitio cada que modificamos un archivo podemos usar el comando "serve" de eleventy:

npx @11ty/eleventy --serve
Documentacion eleventy
El resultado de generar nuestro sitio

Eleventy almacena el sitio en la carpeta _site de manera predeterminada. Los archivos de esta carpeta estan listos para ser desplegados en un servidor.

Deja tu comentario

Comentarios

Comentario del 24/09/2021

Suena bastante interesante para poder hacer un blog y no es complicado, son muchos beneficios con esta alternativa, excelente aportación.