Recordemos que Jekyll clasifica los archivos de contenido en páginas y artículos. Hasta el momento, hemos hecho hincapié en las páginas. Ha llegado el momento de presentar los artículos (posts) para crear así blogs.

Al finalizar, sabrá:

  • Cómo crear su propio blog con Jekyll.

  • Cómo crear los artículos de contenido y dónde añadirlos en el directorio del sitio.

  • Cómo presentar los artículos por páginas.

  • Cómo crear borradores de artículos en los que está trabajando y no desea se publiquen todavía.

  • Cómo etiquetar los artículos.

  • Cómo se generan los canales webs (feeds).

Introducción

Básicamente, un blog es un sitio web cuyo contenido está dedicado a una determinada temática, ya sea vivencias de quien escribe o temas específicos como, por ejemplo, tecnología, ciencia o salud. Suelen publicar nuevo contenido con frecuencia y, en muchos casos, permiten el soporte de comentarios por parte de los lectores. Las empresas los suelen utilizar para mostrar cómo utilizar sus productos y las personas, en muchas ocasiones, para contar historias o incluso crear su propia marca personal.

Con Jekyll, podemos crear blogs muy fácilmente, mediante el uso de artículos (posts), archivos de contenido que representan una entrada de contenido en un blog.

Directorio de artículos

En primer lugar, debemos crear el directorio _posts (_posts directory) en el directorio del sitio. A este directorio lo conoceremos formalmente como directorio de artículos (post directory). Dentro de él, ubicaremos cada artículo mediante su correspondiente archivo, cuyo nombre debe tener el formato año-mes-día-títuloDelArtículo.md. Generalmente, la extensión es .md, pero también puede ser .html, según sus gustos.

La ruta final de acceso a los artículos será como sigue: /año/mes/día/título-del-artículo, a menos que usemos la propiedad defaults del archivo de configuración _config.yaml para fijar un formato alternativo. En el siguiente ejemplo, los artículos se publican dentro de la ruta /blog/año y no siguiendo el formato indicado anteriormente:

# ...

defaults:
  - scope:
      path: ""
      type: posts # con esto, indicamos que se aplique a los artículos
    values:
      layout: post
      permalink: /blog/:year/:title

Entre otros marcadores, podemos usar:

Marcador Descripción
:year Año de cuatro dígititos.
:short_year Año de dos dígitos.
:month Mes de dos dígitos.
:day Día del mes de dos dígitos.
:title Título del artículo.

Así pues, si tenemos el artículo _posts/2023-03-19-bienvenidos-a-las-fallas.md y seguimos con el ejemplo anterior, este se publicará en la ruta /blog/2023/bienvenidos-a-las-fallas.

Encabezamiento de los artículos

Los artículos tienen un encabezamiento (front matter) similar al de las páginas. Vamos a ver un ejemplo:

---
title: Título del artículo
layout: archivo de diseño
---

Primer párrafo del artículo,
conocido formalmente como excerpt.

Resto de párrafos del artículo.

Variable site.posts

Recordemos que la variable global site proporciona diversos datos como, por ejemplo, las páginas a través de su propiedad pages; las colecciones mediante collections; y, la que nos interesa en estos momentos, posts para acceder a los artículos del sitio web, o sea, estos definidos en el directorio de artículos.

Al igual que las páginas, cada objeto de tipo artículo tiene diversas propiedades como, por ejemplo, title, description, url, author, content y cualquier propiedad definida en su encabezamiento. Y también tienen otras propiedades que pueden resultar de interés:

Propiedad Tipo de datos Descripción
excerpt Texto Primer párrafo de contenido del artículo. Extraído automáticamente por Jekyll del contenido.
date Fecha Fecha de publicación del artículo.

Página de blog

Ya hemos visto cómo crear artículos y cómo indicar la ruta en la que deben aparecer, ahora ha llegado el momento de crear la página principal del blog. Para ello, no tenemos más que crear una página de contenido similar a la siguiente:

---
# /blog/index.md
title: Blog
layout: page
---

{%- for post in site.posts -%}
  # {{post.title | escape}}

  Fecha: {{post.date | date: "%d-%m-%Y"%}}

  URL: [{{post.url}}]({{post.url | relative_url}})

  {{post.excerpt}}
{%- endfor -%}

Paginación de artículos

La paginación de artículos (post pagination) es la operación por la que se agrupa los artículos en bloques de un tamaño máximo. Si el blog contiene muchos artículos, no suele ser muy recomendable crear una página conteniendo decenas y decenas de artículos. Puede ser más útil presentarlos en bloques. Para ello, utilizaremos el plugin jekyll-paginate (jekyll-paginate plugin) con el que paginaremos fácilmente los artículos. En primer lugar, debemos configurar el plugin y, en segundo lugar, utilizar Liquid para la paginación.

Configuración del plugin jekyll-paginate

Para configurar el plugin, iremos al archivo de configuración _config.yaml del sitio:

# ...

plugins:
  - jekyll-paginate
  # ...

paginate: número
paginate_path: /formato/de/ruta/de/paginación

Con paginate, indicamos el número máximo de artículos por página. Mientras que con paginate_path, el patrón de la ruta para cada página. Se utiliza el marcador :num para indicar la página actual. Ejemplo:

paginate: 10
paginate_path: /blog/p:num

Siguiendo la configuración anterior, si tuviéramos 27 artículos, tendríamos tres páginas: /blog/index.html con los artículos de la primera página, los más recientes; /blog/p2/index.html con los de la segunda; y /blog/p3/index.html con los de la tercera y última, siendo estos los más antiguos.

Objeto paginator de Liquid

El plugin crea el objeto paginator en Liquid que permite trabajar con las páginas. Este objeto dispone de las siguientes propiedades:

Propiedad Tipo de datos Descripción
posts Lista Artículos disponibles en la página actual.
total_posts Número Número total de artículos.
page Número Número de la página actual.
total_pages Número Número total de páginas.
per_page Número Número máximo de artículos por página.
previous_page Número Número de la página anterior.
previous_page_path Texto Ruta a la página anterior.
next_page Número Número de la página posterior.
next_page_path Texto Ruta a la página posterior.

Con esto en mente, vamos a modificar el código de la página del blog para que liste los artículos por páginas:

---
# /blog/index.html
title: Mi blog
layout: page
---

{% for post in paginator.posts %}
  <h1><a href="{{ post.url }}">{{ post.title | escape }}</a></h1>

  <p class="author">
    <span class="date">{{ post.date | date: "%d-%m-%Y"}}</span>
  </p>

  <div class="content">
    {{ post.excerpt }}
  </div>
{% endfor %}

<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">
      &lt;&lt;
    </a>
  {% else %}
    <span class="previous">&lt;&lt</span>
  {% endif %}

  <span class="page_number ">
    {{ paginator.page }} de {{ paginator.total_pages }}
  </span>

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">&gt;&gt;</a>
  {% else %}
    <span class="next ">&gt;&gt;</span>
  {% endif %}
</div>

En el momento de escribir estas líneas, la paginación sólo funciona con archivos HTML, no utilice index.md sino index.html. Es una restricción bastante importante a tener en cuenta y recordar.

Borradores de artículos

Un borrador de un artículo (post draft) es un artículo no terminado, en el que estamos trabajando, susceptible de cambios y, por lo tanto, no publicable todavía. Este tipo de artículos se ubican en el directorio _draft (_draft directory) del directorio del sitio, así se garantiza que no se publicarán.

Etiquetado de artículos

Debido a la naturaleza de los artículos, en un mismo blog podemos tener artículos de distinta índole. Jekyll permite que los categoricemos de alguna manera. Para ello, podemos utilizar las propiedades tag y tags de los encabezamientos. Consideraremos una etiqueta (tag) como un identificador de un tema. A través de estas etiquetas podemos proporcionar información de clasificación del contenido tratado en el artículo. Las etiquetas las decidimos nosotros, no vienen impuestas por Jekyll.

Cuando un artículo se asocia a una única etiqueta, podemos indicarla mediante su propiedad tag. En cambio, si deseamos asociarlo a varias etiquetas, usaremos tags, una lista donde cada uno de sus elementos representa una etiqueta. Ejemplo:

---
title: Un día en la oficina
layout: post
tag: trabajo
---

Contenido del artículo.

Variable site.tags

En site.tags, Jekyll pone a nuestra disposición las etiquetas y los artículos asociados a ellas. Consiste en un objeto donde existe una propiedad para cada etiqueta, donde su valor es la lista de todos los artículos asociados a esa etiqueta. Gracias a esto, podemos crear una página que liste los artículos que tienen asociada una determinada etiqueta. Para ello, crearemos una página específica de esa etiqueta y ubicaremos en ella los artículos con algo similar a:

{%- assign posts = site.tags.etiqueta -%}
{%- for post in posts -%}
  ## {{ post.title }}

  Url: [{{ post.url }}]({{ post.url }})

  {{ post.excerpt }}
{%- endfor -%}

Canales webs

Un canal web (web feed) es un archivo que proporciona información actualizada de algún sitio como, por ejemplo, los artículos más recientemente publicados en un blog. La W3C generó su propio estándar, Atom, para este tipo de archivos así como el protocolo para su intercambio. Jekyll proporciona el plugin jekyll-feed (jekyll-feed plugin) con el que generar este tipo de archivos a partir de los artículos contenidos en el sitio web.

Estos archivos se utilizan para mantener al día a los usuarios del sitio con las nuevas publicaciones. Por lo que es recomendable usarlo y saber configurarlo para comprender exactamente que añadirá Jekyll a ellos.

Configuración del plugin jekyll-feed

El plugin se configura en el archivo _config.yaml del sitio. Por un lado, utiliza diversas propiedades de este archivo, ajenas al propio canal, como, por ejemplo, title, description, url y author. Por otra parte, define su propia propiedad en la que indicar su configuración personalizada, feed. Ejemplo:

plugins:
  - jekyll-feed
  # ...

feed:
  path: /blog/feed.xml
  excerpt_only: true
  posts_limit: 15
  tags:
    path: /blog/
    only:
      - ciencia
      - tecnología

A su vez, feed contiene las siguientes propiedades:

Propiedad Tipo de datos Descripción
path Texto Ubicación del archivo del canal web como, por ejemplo, /blog/feed.atom. En caso de omisión, /feed.xml.
posts_limit Número Número máximo de artículos que se añadirán al canal.
excerpt_only Booleano Indica si para cada artículo sólo debe adjuntar su primer párrafo: true, sí; false, no, todo su contenido.
tags Booleano u objeto Indica si generar un canal para cada etiqueta.

Adicionalmente, de cada artículo utiliza las siguientes propiedades: title, date, excerpt, id, tags, image y author. En caso de omitir author en un artículo, utilizará el author del archivo _config.yaml.

Canales independientes para las etiquetas

Si deseamos generar un canal para cada etiqueta, no tenemos más que utilizar la propiedad feed.tags del archivo de configuración _config.yaml. Esta propiedad puede ser un valor booleano que, en caso de indicar true, indicará que así debe ser; o bien, un objeto que personalice para qué etiquetas generar su propio canal y su configuración particular.

Vamos a centrarnos en la configuración personaliza de los canales asociados a etiquetas. Recordemos que tendremos que indicar un objeto, en vez de un valor booleano, con las siguientes propiedades:

Propiedad Tipo de datos Descripción
except Lista de textos Etiquetas de las que no deseamos se genere su propio canal.
only Lista de textos Etiquetas para las que generar su propio canal.
path Texto Directorio donde ubicar los canales asociados a las etiquetas como, por ejemplo, /blog/.

Tema minima

El tema minima define la propiedad show_excerpts en el archivo de configuración _config.yaml con la que indicarle si deseamos que añada al final de la página de inicio los excerpts de los artículos. Si su valor es true, así lo hará.