Jekyll

2. Front Matter y Liquid

Siguiedo con este “mini curso”, lo que necesitamos entender ahora es ¿qué es el front matter?

Front Matter

El front matter es un bloque de metadatos ubicado en la parte superior de un archivo markdown. Este contiene la información estructurada del documento, como el diseño que va a utilizar (layout), el título, la fecha, la descripción y la imagen que acompaña al texto. Jekyll lee esta información al momento de convertir los archivos markdown a html, lo cual lo ayuda a determinar cómo debe organizar los documentos y qué plantillas debe aplicar.

Los datos que podemos definir en un front matter van a depender del tipo de documento que queramos realizar. Por ejemplo, si estuviésemos creando un blog, quizás nos interesaría tener:

---
layout: post
date: 2026-02-21
title: "Título del artículo"
description: "Una breve descripción acerca del contenido"
image: "path/de/la/imagen/principal"
category: blog
tags: [nota, articulo, escritos]
---

La manera en la que le indicamos a los generadores de sitios que este bloque es un front matter es encerrando las propiedades con --- al inicio y nuevamente al final. Estos guiones le indican a Jekyll que el contenido interno utiliza la sintaxis YAML, estructurando la información mediante pares de clave-valor (propiedad: valor). Es indispensable que ciertos valores mantengan un formato estricto; por ejemplo, la fecha (date) debe respetar el formato estándar AAAA-MM-DD (o incluir la zona horaria) para evitar fallos de compilación. Cumpliendo estas reglas, no tenemos que configurar nada más.

La cantidad de propiedades que coloquemos es relativa a lo que estamos queriendo construir. Supongamos que queremos crear documentos sobre libros; entonces también podríamos definir: author, pages, editorial, country, ranking, etc. Podemos pensarlo como una ficha de información que nuestro documento requiere para adoptar un estilo personalizado y estructurado.

Quizá las propiedades más importantes y las que con seguridad vamos a utilizar más sean dos: layout y date. La primera se emplea para indicarle a Jekyll cómo construir la página. Para esto, en una carpeta llamada _layouts debemos colocar un archivo html llamado post.html, coincidiendo con el valor que asignamos en el front matter. De esta manera, Jekyll toma el archivo html de _layouts y lo utiliza como plantilla junto al contenido del documento que estamos escribiendo.

La propiedad date la vamos a poder utilizar luego para organzar nuestros documentos y que el último aparezca en una primera posición.

La información declarada en el front matter se puede utilizar por fuera del documento para crear un indexador de archivos en el que listemos, por ejemplo, por title y agrupemos por category. Es decir, en lugar de ejecutar una consulta a una base de datos para recuperar y agrupar registros, logramos el mismo resultado indicándole a Jekyll que procese todos los archivos cuyo front matter contenga la categoría blog. La diferencia principal es que con Jekyll este procesamiento ocurre de manera estática durante la construcción del sitio (build), mientras que en un entorno con SQL ocurre dinámicamente en tiempo de ejecución.

Para esto vamos a tener que comenzar a tener en cuenta otro concepto que es Liquid.

Liquid

Liquid es un lenguaje de código abierto creado por Shopify y escrito en Ruby. Su función es actuar como un intermediario entre los datos (front matter) y el código HTML. Esto nos permite inyectar contenido dinámico dentro de archivos estáticos.

Liquid tiene tres componentes principales.

1. Objetos

Se trata de bloques que vamos a utilizar para mostrar el valor de una variable. Por ejemplo:

{{ page.title }}

Utilizamos dos llaves de apertura y dos más para cerrar el bloque. Dentro ponemos la variable que contiene el valor que queremos mostrar. En el ejemplo utilizamos page. Esta es una variable propia de Jekyll, la cual se utiliza dentro del mismo documento para poder mostrar el valor que hayamos puesto en el front matter. Por ejemplo:

---
title: "Título de la nota"
---

<div>
    <h1>{{ page.title }}</h1> <!--Veríamos: Título de la nota-->
</div>

De esta manera, vamos a tener un h1 con el título que hayamos utilizado en el front matter.

También vamos a poder utilizar los objetos para traer un listado de elementos, como por ejemplo:

{{ site.posts }}

site representa nuestro sitio, desde donde vamos a poder acceder a todo tipo de propiedades, como las colecciones que hayamos armado (posts, fotografías, dibujos). Para esto, colocamos un punto (.) seguido del nombre de la colección (por ejemplo, posts) para acceder al listado total de esos documentos.

Sin embargo, no podemos utilizar este objeto directamente para mostrar información legible en pantalla. Antes, vamos a tener que realizar un recorrido por cada uno de los documentos para poder acceder a sus front matters y obtener, digamos, el título y la imagen.

2. Etiquetas

Controlan la lógica del diseño y el flujo de la información, permitiendo ejecutar condicionales o bucles. Se encierran entre llaves y el símbolo de porcentaje. Por ejemplo:

{% if page.category == 'blog' %}
    <p>Esto es un blog</p>
{% endif %}

En este ejemplo estamos realizando una condición sobre la propiedad del front matter llamada category. En caso de ser cierto que contiene el valor blog, entonces Jekyll colocará el párrafo que indica Esto es un blog. Caso contrario, no lo tomará en consideración.

A diferencia de los objetos, estos bloques en general van a tener, además de un inicio con {% %}, uno igual para el cierre. Dentro pondremos la lógica que queremos ejecutar. En el caso anterior, iniciamos la instrucción colocando {% if page.category == 'blog' %} y la finalizamos con {% endif %}.

Pero además de realizar condicionales, también podemos ejecutar bucles:

{% for post in site.posts %}

{% endfor %}

La indicación que le estamos dando es que primero tome todos los documentos de site.posts y que, por cada uno, guarde el contenido temporalmente en la variable post. Dentro del bloque podemos diseñar cada uno de los documentos de manera individual. Supongamos que queremos realizar un indexador para listarlos; podemos hacer lo siguiente:

<ul>
{% for post in site.posts %}
    <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
{% endfor %}
</ul>

El objeto title nos trae el título que le colocamos a nuestro documento. Por su parte, url es una propiedad genérica de Jekyll que no tenemos que definir en el encabezado, sino que representa la ruta de enlace que cada documento genera automáticamente.

Con esto ya podemos empezar a diseñar una buena parte de la página que tengamos en mente.

3. Filtros

Por último, tenemos los filtros. Estos modifican la salida de un objeto, ya sea para alterar el formato de una fecha o convertir el texto a mayúsculas. Se utilizan aplicando una barra vertical o pipe (|):

{{ page.title | upcase }}

También los vamos a poder utilizar al momento en el que traemos una lista de documentos, pero para ello debemos asignar el resultado filtrado a una nueva variable utilizando la etiqueta assign:

{% assign sorted_posts = site.posts | sort: "date" %}

<ul>
{% for post in sorted_posts %}
    <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
{% endfor %}
</ul>

En este ejemplo, primero le indicamos mediante assign que tome el listado de documentos de la colección posts y lo ordene según la fecha. Luego, el bucle recorre esa nueva variable ya ordenada.

Tenemos varios tipos de filtros y podemos ir encadenándolos para obtener exactamente el listado de documentos que estamos necesitando:

{% assign filtered_posts = site.posts | where: "category", "blog" | sort: "date" %}

<ul>
{% for post in filtered_posts %}
    <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
{% endfor %}
</ul>

En este último escenario, le indicamos que nos traiga solo los documentos que tengan como category el valor blog y que luego los ordene según date, guardando el resultado final en filtered_posts para construir la lista.

Layouts

Ya mencionamos al inicio de qué se trata la carpeta _layouts y qué clase de archivos colocamos en ella. ¿Pero cómo armamos plantillas para nuestros documentos? Ahora que entendemos cómo utilizar variables u objetos con Liquid, podemos hablar de una palabra reservada que Jekyll nos entrega que se llama content, la cual se encarga de incrustar todo el documento que hayamos creado y vinculado a través de la propiedad layout del front matter.

Es decir, cuando le indicamos por medio de layout la plantilla que queremos utilizar, la manera en la que hacemos uso de esta es por medio de la variable content. Al momento de generarse el archivo HTML, Jekyll colocará todo el contenido del documento exacto en el lugar de esa variable, gracias a lo cual vamos a tener un solo archivo HTML que une tanto el layout como el post o documento.

Para usarlo, solamente debemos colocar en el archivo HTML que vamos a llamar desde la propiedad del front matter lo siguiente:

<head></head>
<body>
    {{ content }}
</body>

Esto nos permite poder tener en un solo lugar algunos elementos que luego se verán en toda la página, como una barra de navegación:

<head></head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Blog</li>
            <li>Contactos</li>
        </ul>
    </nav>
    {{ content }}
</body>

Podemos tener todos los layouts que necesitemos. Por ejemplo, la sección posts podría tener uno y luego fotografías tener otro distinto.

¿Y qué pasa si en ambos queremos mostrar la barra de navegación? Con lo que sabemos hasta acá, nos tocaría copiar el esquema de un HTML al otro. Si cambiamos un enlace en uno, vamos a estar obligados a cambiarlo en el otro. Esto es mucho trabajo. Por eso, tenemos también otro bloque que Liquid nos permite utilizar para evitar duplicar código, el cual se llama include.

Include

Include, como su nombre hace mención, es una etiqueta que permite incrustar código de un archivo HTML dentro de otro. Es similar a content, pero a diferencia de este (que lo gestiona Jekyll automáticamente al armar la estructura general), en este caso nosotros somos quienes le indicamos el contenido de qué archivo HTML tiene que utilizar.

Por ejemplo, supongamos que queremos poner la barra de navegación en un archivo separado para poder gestionarla siempre desde un solo lugar. Creamos un archivo llamado navbar.html y lo agregamos en una carpeta especial, llamada _includes, para que Jekyll pueda encontrarlo rápidamente:

_includes/navbar.html

<nav>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>Contactos</li>
    </ul>
</nav>

Y para poder colocarlo en otro archivo HTML, realizamos lo siguiente:

<head></head>
<body>
    {% include navbar.html %}
    {{ content }}
</body>

De esta manera, podemos poner la barra de navegación en todos los layouts y modificarla desde un solo archivo.