Passer de Wordpress à Hugo

Apr 9, 2021

Ca faisant longtemps que je fustigeais sur l'utilisation de l'usine à gaz wordpress pour notre blog, d'un point de vu sécuritaire également. Il se trouve qu'il n'est principalement plus utilisé (par ces auteurs), et que de nombreux plugins que nous utilisions ne sont plus utiles désormais.

J'ai donc décidé avec un peu d'aide, d'enfin passer le pas vers un moteur de blog statique. Mon choix c'est tourné vers Hugo;.

Si vous lisez ces lignes, c'est que cette migration s'est plus ou moins bien déroulée, j'en avais parlé par shaarlink interposés ici;.

Copier les articles de Wordpress vers Hugo (en markdown)

Pour copier tous les articles de wordpress vers Hugo en markdown, j'ai utilisé le plugin WordPress to Hugo Exporter.

Deux points à noter:

  1. Il y a une option pour intégrer les commentaires dans l'article (Hugo ne proposant pas par défaut un système de commentaire ... vu que c'est un moteur de blog statique)
  2. Le plugin copie l'ensemble du dossier "wp-content" qui contient toutes les images (et son/vidéo) uploader sur wordpress ... dans notre cas, cela correspond à 14G

J'ai du coup, dans le fichier hugo-export.php:

  1. Activer cette option:
l.39 : private $include_comments = true;
  1. Commenter la copie du dossier "wp-content" :
l. 497 : //$this->copy_recursive($upload_dir['basedir'], $this->dir . str_replace(trailingslashit(get_home_url()), '', $upload_dir['baseurl']));

Puis copier tel-quel mon dossier "wp-content" dans le dossier "public" de hugo (pour avoir /var/www/hugo/public/wp-content/)

On se retrouve avec une archive qui contient un dossier "article" contenant un fichier markdown (.md) par article On peut récupérer manuellement le dossier "wp_content" dans l'installation de wordpress.

Choisir et installer un thème

Pour ma part, j'ai choisi le thème Clarity;

Pour l'installer j'ai fait comme cela (je ne dis pas que c'est la bonne méthode):

git clone https://github.com/chipzoller/hugo-clarity.git
mv hugo-clarity hugo
mkdir hugo/content/post/
mv /chemin/vers/article/*.md hugo/content/post/
cp hugo/exampleSite/config.toml hugo/
cp hugo/exampleSite/configTaxo.toml hugo/
mv wordpress/wp-content/ hugo/public/

J'ai modifié un peu le fichier config.toml, principalement:

[...]
baseURL = "//blog.m0le.net/"
title = 'm0le-o-blog'
copyright = "WTFPL v2"
[taxonomies]
category = "categories"

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      hardWraps = false
      unsafe = true # change to false to disable inclusion of rawHTML and math functions
      xhtml = false
    [markup.goldmark.extensions]
      typographer = false
[...]

Puis j'ai pu générer mon site en exécutant simplement:

$ hugo
Start building sites …

                   | EN
-------------------+------
  Pages            | 541
  Paginator pages  | 217
  Non-page files   |   0
  Static files     |  57
  Processed images |   0
  Aliases          |  43
  Sitemaps         |   1
  Cleaned          |   0

Total in 19095 ms

Problème de tag trop nombreux

Lors de ma première génération d'article, cela prenait plus de 20 minutes à chaque fois, la faute à de bien trop nombreux tags (qui nous servait de SEO à l’époque). J'ai dû m'en passer en utilisant le script suivant:

#!/bin/bash
for file in hugo/content/post/*; do
        awk '$1 == "---"{t=1}
        t==1 && $1 == "tags:"{t++; next}
        t==2 && /:[[:blank:]]*$/{t=0}
        t != 2' $file > $file.tmp
        rm $file
        mv $file.tmp $file
done

Corriger les liens

Tous les liens vers les fichiers image/son/vidéos étaient hard-codé "https://blog.m0le.net/wp-content/"; ce qui empêchait l'utilisation du http (je ne le force pas)

J'ai fait un petit sed des familles pour corriger les liens ( https://blog.m0le.net vers //blog.m0le.net)

sed -i 's#https://blog.m0le.net/wp-content/#//blog.m0le.net/wp-content/#g' *.md

Les catégories, liens et hiérarchie

Sous wordpress, il est possible d'avoir des catégories et des sous-catégories, qui n'est pas possible ""nativement"" sous Hugo. De plus, le lien des categories est "/category/" contre "/categories/" sous hugo.

J'ai donc dû jouer des liens (ln -s) sur les dossiers/fichiers statiques, ce qui me permet de garder les backlink intact, comme : https://blog.m0le.net/category/episode/nonos-songs;

en gros, j'ai dû faire manuellement:

ln -s hugo/public/categories hugo/public/category
ln -s hugo/public/categories/nonos-songs hugo/public/categories/episode/nonos-songs/

Ce qu'il reste à faire ou pourrait être amélioré

Maintenant que tous est en place de façon statique, je pourrais (si le cœur ou l'envie m'en dit) :

  1. Ajouter un système de commentaire (Isso utilisé par lord.re par exemple)
  2. Mettre les articles dans une forge git
  3. Proposer plusieurs thèmes et/ou l'internationalisation des articles
  4. Nettoyer un peu les articles qui contiennent encore des bouts de html/code typique de wordpress

Conclusion

L'un dans l'autre, le travail effectué n’était pas si énorme que cela, merci au plugin de conversion. La courbe d'apprentissage de Hugo n'est pas très pentue, merci aux articles et aide de Lord (https://lord.re/posts/82-hugo-tutorial/) Me voilà un peu plus serein niveau sécurité pour un blog "archive"