Porter un thème de Jekyll vers Hugo

Table des Matières

Migration d’un thème Jekyll vers Hugo

Jekyll est sans doute le générateur de blog statique le plus populaire notamment de part le lien qu’il entretient avec Github. Pour ma part j’utilise Hugo, que je trouve plus sympa à faire tourner sans se prendre la tête.

Alors le défi du jour consiste à porter un thème crée pour Jekyll (templating Ruby/Liquid) vers Hugo (Templating en GO). Je n’y connais pas grand-chose mais ça vaut le coup d’essayer, surtout que j’ai pris mes habitudes avec Hugo.

Créer une base et importer la base d’un thème

Pour commencer je choisis un thème qui, avec le temps, revient toujours chez moi tant je le trouve adapté à ce que je cherche. Le thème s’appelle Leonids, une sidebar latérale, un large zone de texte. Parfais pour un blog.

Hugo a une très bonne documentation et le forum est une mine d’or pour trouver des astuces :

Ruby > Go

Jekyll et Hugo ont la même fonction, il n’y a que le langage utilisé qui change et donc la syntaxe même des fichiers qu’utilise le générateur pour générer. Je n’ai aucunes connaissances dans ces deux langages alors pour porter le thème de Ruby vers Go j’ai simplement ouvert pas mal d’onglets dans Firefox et essayé de comprendre un peu les équivalences.

{{ .Params }}

Au départ je souhaitai simplement utiliser ce thème pour mon blog mais c’est plus amusant de le balancer sur Github pour en faire profiter les autres utilisateurs d’Hugo et,si possible, faire remonter des erreurs passées au travers.

Le thème se veut donc le plus neutre possible pour que chacun puisse l’utiliser à sa sauce. Pour cela Hugo permet de rentrer des données dans le fichier de configuration ‘config.toml’ afin de les utiliser dans les templates par la suite.

L’utilisation se fait avec le code ‘{{ .Site.Params « votretruc » }}{{ . }}’
La documentation d’Hugo est très bien fournie et permet vraiment de comprendre rapidement comment fonctionne le templating et les relations qu’on peut obtenir entre les données de notre fichier config et le code HTML/Go de notre site web.

Vérifier le rendu HTML

Le thème est maintenant opérationnel, reste plus qu’une seule étape : la validation du code HTML.
J’ai trouvé sur le net un petit script python qui fonctionne plutôt bien pour vérifier que votre site ne comporte aucune erreur dans sa syntaxe, il s’agit de ‘w3c-markup-validator’.

Le script se récupère ici et il suffit juste de modifier la ligne base_url avec l’adresse de son site puis de le lancer. C’est assez long selon la taille du site mais au moins ça permet de cibler rapidement les pages comportant des erreurs.
Il fonctionne très bien mis à part qu’il ressort à chaque fois que la page d’accueil comporte des erreurs alors que si on la vérifie depuis l’url de w3c le document ressort avec une copie parfaite. J’ai testé cela sur plusieurs sites et toujours la même chose.

Et ce n’est pas tout

Les générateurs de blogs statiques sont géniaux d’un point de vue sécurité : pas de base de données bancale. Ils sont aussi sympas pour le respect de la vie privée : Pas de service tiers si vous le voulez.
Se passer de JavaScript c’est faisable :

Pure CSS Lightbox

Les images c’est chouette, ça fait une pause visuelle dans la lecture de pavés. Pour avoir un bel effet on utilise souvent des lightbox en JavaScript pour avoir de beaux effets, de belles infos. Fancybox, PhotoSwype, Magnificpopup sont des noms qui reviennent souvent. Oui mais alors que pouvons-nous faire si l’on souhaite une simple lightbox pour afficher l’image à sa juste taille ? Hé bien la réponse tient dans une feuille de style css et du code HTML.

Le code peut se trouver sur Codepen et sur youmightnotneedjs.

Shortcodons cela

Insérer un code HTML dans un fichier markdown ? C’est possible, mais ça rend pas très bien sur l’homogénéité du document. Avec Hugo il est possible d’utiliser des shortcodes, des plugins écrits en HTML/GO qui apportent une syntaxe uniformisée pour toutes les fonctions.

Shortcode :

<p><a href="#{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" class="thumbnail" alt="{{ .Get "alt" }}">
</a>
<a href="#_" class="lightbox" id="{{ .Get "href" }}">
  <img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
</a></p>

Du coup il suffit maintenant d’entrer le shortcode suivant avec les valeurs souhaitées pour obtenir un bon code HTML pour la Lightbox à la génération.

{{< lightbox href="#img1" src="" alt="">}}

C’est donc avec un plaisir immense que je mets à jour le site aujourd’hui, le code du thème est disponible sur Github et maintenant je vais m’atteler à une partie un peu plus corsée : Un système de commentaires statiques.

Billets en liens :