J’ai migré mon blog de Wordpress vers Hugo la semaine dernière. Je suis vraiment content d’avoir arrêté d’utiliser Wordpress. J’aurais du le faire il y a longtemps déjà pour des raisons de maintenance, de sécurité, de performance, de versioning… et je ne parle même pas de l’éditeur Gutemberg.

J’ai longtemps repoussé l’opération en pensant qu’il me faudrait beaucoup de temps. Mais la migration fut plus facile que je ne l’avais imaginé. Je vais expliquer les principaux outils que j’ai utilisé.

L’export des données de Wordpress

Plusieurs outils sont listés sur le site officiel de Hugo. J’ai opté pour deux outils :

J’ai utlisé le premier script pour exporter mes articles. Il a l’avantage de générer une arborescence avec un dossier par article, avec la possibilité de prefixer le dossier avec la date et d’inclure un sous-dossier image. Cela permet d’organiser le contenu sous forme de page bundles.

J’ai utilisé le deuxième pour exporter les commentaires. Il faut tweaker le script manuellement, mais c’est très simple et documenté. Ce qui a été laborieux a été de copier les commentaires manuellement vers les pages générées par le premier script.

Je voulais que les URLs générées par Hugo correspondent exactement aux anciennes URL de Wordpress. Il m’a suffit de configurer correctement les permalinks et les slugs de chaque article.

La correction du Markdown généré

Bien que le script fasse globalement bien le travail, il vaut mieux repasser sur chacun des articles pour vérifier la propreté du Markdown.

J’ai eu à retraiter :

les vidéos intégrées, en utilisant le shortcode YouTube. https://github.com/CaiJimmy/hugo-theme-stack
certains articles où j’avais intégré du HTML natif. Etonnament, Hugo ne fournit pas nativement un shortcode pour insérer du HTML, mais c’est le shortcode le plus simple à écrire.
certains caractères accentués qui étaient encodés sous forme d’entité HTML (é, à, etc…)
les exemples de code insérés avec des <code> ou <pre>

Le nettoyage des liens

J’en ai profité pour nettoyer mes liens externes qui étaient “cassés”. J’ai utilisé l’outil en ligne de commande Broken Link Checker pour vérifier automatiquement tous les liens.

Avec certains articles écrits il y a plus de 10 ans, il n’est pas rare que les liens ne fonctionnent plus. Parfois, j’avais également faire l’erreur de charger des images depuis un site externe et elles ne marchaient plus.

Un thème tout prêt

J’ai installé le thème Stack. Il est bien adapté pour un blog, multi-lingue, bien documenté et dispose d’un mode clair/sombre basculable avec un switch.

Un peu de Javascript dans ce monde statique

Sur mon ancien site Wordpress, j’avais codé un widget en PHP pour afficher des citations aléatoires. J’ai refait la même chose avec un peu de HTML et de Javascript.

L’exemple ci-dessous est adapté au thème Stack, mais il est très facilement adaptable à d’autres thèmes.

layouts/partials/widget/quotes.html

<section class="widget quotes">
    <div class="widget-icon">
        {{ partial "helper/icon" "quote" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.quotes.title" }}</h2>
    <div class="widget-quote--blockquote">
        <blockquote>
            <span id="quote-text"></span>
            <div class="quote-thumb"><img id="quote-picture" src="" alt=""></div>
            <cite><em><span id="quote-author"></span></em><br /><span id="quote-profession"></span></cite>
        </blockquote>
    </div>
</section>
<script>
    let quotes = JSON.parse("{{ .Context.Site.Data.quotes | jsonify }}");
    let quote = quotes[quotes.length * Math.random() | 0];
    document.getElementById('quote-text').textContent = quote['quote']
    document.getElementById('quote-author').textContent = quote['author']
    document.getElementById('quote-profession').textContent = quote['profession']
    document.getElementById('quote-picture').src = quote['picture']
    document.getElementById('quote-text').alt = quote['author']
</script>

Il suffit de placer les citations dans un fichier data/quotes.json avec ce format :

[
    {
        "quote": "On ne change pas les choses en s'opposant à ce qui existe déjà. Pour que les choses changent, il faut construire un nouveau modèle qui rende l'ancien obsolète.",
        "author": "Richard Buckminster Fuller",
        "profession": "Philosopher",
        "picture": "/quote/Richard_Buckminster_Fuller.png"
    },
    {
        "quote": "Pas plus que le bonheur, on ne peut pas poursuivre la réussite ; elle doit s'ensuivre et elle ne s'ensuit que comme effet secondaire non prémédité de notre engagement en faveur d'une cause qui nous dépasse.",
        "author": "Viktor Frankl",
        "profession": "Psychiatrist",
        "picture": "/quote/Viktor_Frankl.jpg"
    },
    {
        "quote": "Ce que l'on conçoit bien s'énonce clairement, et les mots pour le dire arrivent aisément.",
        "author": "Nicolas Boileau",
        "profession": "Poëte",
        "picture": "/quote/Nicolas_Boileau.jpg"
    }
]

Conclusion

La migration vers Hugo s’est avérée beaucoup plus simple que prévu.

Désormais, le site est géré comme du code : il est versionné sur Github et déployé automatiquement sur Netlify avec un système de déclencheur à chaque commit. Si j’ai un changement plus important à réaliser, je peux créer une nouvelle branch git, la prévisualiser en pré-production sur Netlify puis la pousser en production très simplement. Je vous invite à consulter la documentation sur l’intégration de Netlify avec un dépôt Hugo sur Github.