Passage de Jekyll à Zola

Ecrit le , 5 minutes de bouquinage

J'ai entendu parler de Zola dans un article partagé sur le Journal du Hacker et j'ai voulu me tenter à la migration du blog sur ce générateur de site statique.

Comme j'avais un besoin (pas gros hein) d'avoir un truc qui puisse fonctionner sans devoir galérer sous Windows avec Ruby. WSL peut aider mais bon... Tu vois quoi.

Zola est écrit en Rust et comporte quelques fonctionnalités intéressantes en plus de la rapidité qui pète tous les records. Je pense qu'on va commencer par le commencement, ce serait une bonne idée, non ?

J'entends passer sur quelques particularités de Zola avant de passer aux ajouts sur le Markdown et mes pensées sur la remise en place de mon thème.

Le commencement

Pour écrire cet article, j'utilise le Markdown. Jusque là, pas de truc extraordinairement disruptif.

Capture d'écran du début de l'article dans Atom

Le front-matter (ci-après fm) s'écrit avec du TOML, langage de configuration simple du style ini, et aucune donnée n'est obligatoire. En quelques sortes, ce fm définit les métadonnées de la page en question, telles que la date, si c'est un brouillon ou pas, etc. Sur la capture d'écran, l'article que vous lisez, encore en brouillon au moment de l'écriture, va de la ligne 1 à 5:

title = "Passage de Jekyll à Zola"
draft = true
date = 2020-01-15

On y retrouve le titre de l'article, si c'est un brouillon ou pas et la date d'écriture qui sera la date de publication.

La documentation mentionne toutes les informations que l'on peut faire figurer.

La structure

C'est un peu déroutant et pas super évident du premier coup quand on vient de Jekyll. Chaque sous-dossier de content représente une section. On peut y mettre un _index.md qui contiendra des données sur la section. Sans ce fichier _index.md, les pages seront orphelines.

Capture d'écran du contenu du dossier 'content'

Par défaut, le parent n'aura pas accès aux pages d'une section. Cependant, il existe un paramètre de configuration à mettre dans le fm du fichier _index.md qui s'appelle transparent. Cette directive demande à la section de permettre au parent d'accéder aux pages qu'elle contient. Utile pour le classement par année par exemple.

Pas le concept le plus évident mais une fois compris, on peut faire quelque chose.

La collocation d'assets

Une fonctionnalité qui m'a séduite est la possibilité de mettre les assets au même endroit que l'article. Cela permet de ranger les images ou différents fichiers relatifs à un article. Les différentes images de cet article sont rangées dans le dossier de l'article et, avec une autre fonction, je génère la miniature et le lien vers l'image.

Capture d'écran montrant les assets de l'article dans le même dossier de l'article

Les shortcodes

Si j'ai compris, c'est aussi une fonction disponible sur Hugo. Les shortcodes sont très pratiques pour écrire courtement tout un contenu. Par exemple

{.% warning(title="Ceci est un avertissement") %}
Ceci est le corps de l'avertissement. *Avec du Markdown*.
{% end %}

(sans le point entre l'accolade et le symbole pourcent) est un shortcode qui sera rendu comme ceci:

Ceci est un avertissement
Ceci est le corps de l'avertissement. Avec du Markdown.

image_preview, vu dans la première capture d'écran, est en réalité un shortcode qui utilise une fonction resize_image pour redimensioner des images et donc de faire des miniatures.

Ils sont plus faciles à écrire pour Zola que pour Jekyll puisqu'il n'y a pas besoin de taper toute une classe Ruby pour ajouter un tag ou quelque chose de la sorte. Sur Zola, un petit fichier HTML dans ~/templates/shortcodes et on est partis.

Bref... Il y a pas mal de petites fonctions en plus ci et là, trop pour cet article. Encore une fois, la documention est à votre disposition.

Rechargement en direct

Qui permet de voir les modifications en direct. C'est tellement plus agréable de ne pas quitter son clavier et de voir, sur un second écran, la tête du site une fois en production. C'est une fonctionnalité qui, lors de l'écriture d'articles, manquait pour voir ce que ça donne.

Rapidité de génération

Comme Zola est en Rust, outre le fait que tout est dans le binaire, la génération est rapide. Environ 100ms pour générer toutes les pages des articles de ce blog jusqu'à cette date. Le temps de génération sera évidemment plus grand s'il y a des images à traiter et mettre en cache la première fois.

La migration du blog

N'était pas facile pour ma part et ce, pour plusieurs raisons:

  • Prendre en main Zola pour faire du contenu;
  • Créer le template des différentes pages;
  • Rédiger un petit script sed pour convertir les articles issus de Jekyll
  • Rédiger un script shell pour mettre les URIs des commentaires dans le front-matter des articles migrés
  • Concocter des expressions de réécriture sur Nginx

La prise en main n'était pas trop compliquée et le portage du template existant non plus. Forcément, si on crée un site depuis pas grand chose, c'est tout de suite plus simple :p

Aussi, je m'excuse d'avance pour celles et ceux qui sont abonné·e·s à mon flux RSS, il y a des chances que des articles se dédupliquent ^^'

Globalement, cela s'est bien passé. Seul le temps dira si, oui ou non, j'apprécie l'outil.