14 Apr 2020

[Hugo] Importer Ses Articles Wordpress Dans Hugo

Dans le cadre de la migration de ce blog de Wordpress à Hugo l’un des challenges a été de récupérer l’ensemble des articles de mon Wordpress pour les réimporter en Markdown pour Hugo.

Je vais vous expliquer la méthode que j’ai employée ici.

L’extension d’export Wordpress vers Hugo

Il existe une extension Wordpress qui permet de réaliser un export de tout ses articles au format acceptable pour Hugo: wordpress-to-hugo-exporter . Celle-ci ne semble pas être disponible en téléchargement direct depuis l’interface d’administration de Wordpress. Nous allons devoir procéder à une installation manuelle.

Installation

Pour procéder à l’installation il convient de copier l’ensemble des sources du module à l’intérieur du dossier plugins de notre Wordpress. Nous allons réaliser ceci en clonant le dépôt via la commande git.

$ cd wp-content/plugins/
/wp-content/plugins$ git clone https://github.com/SchumacherFM/wordpress-to-hugo-exporter.git

Vous pouvez ensuite vous rendre dans l’onglet Extensions de l’administration de Wordpress et sélectionner le filtre Désactivée (/wp-admin/plugins.php?plugin_status=inactive). Vous devriez voir apparaitre notre nouvelle extension, activez-la!

Export des données vers Hugo

Dans le menu Outils vous trouverez un nouveau lien Export to Hugo. Celui-ci vous permettra de télécharger une archive de tout les articles de votre site web au format Hugo.

Vous pouvez la décompresser dans un dossier temporaire. Nous devrons ensuite replacer les fichiers dans les bons dossiers.

$ mkdir monsite/tmp
$ cd monsite/tmp
monsite/tmp$ mv ~/Downloads/hugo-export.zip ./
monsite/tmp$ unzip hugo-export.zip

Nous retrouvons plusieurs dossiers suite à l’extraction:

posts: Ce dossier contient l’ensemble de vos articles
wp-content/uploads: L’ensemble des fichiers statiques nécessaires pour vos articles (les images par exemple)
config.yaml: Un fichier de configuration avec les options globales de votre site (URL, Nom, Description).
Un dossier par page: Qui correspond aux pages qui ne sont pas des articles de blogs de votre Wordpress.

Réimport des articles et pages

Le fichier premier fichier à migrer est le fichier de configuration. Dans mon cas de figure celui-ci ne contenait rien qui n'était pas déjà réimporté sur mon instance Hugo. Je l’ai donc simplement supprimé.

monsite/tmp$ rm hugo-export/config.yaml

Pour effectuer la réimportation nous allons tous d’abord déplacer l’ensemble des images dans le dossier static de notre site Hugo

monsite/tmp$ hugo-export/wp-content ../static

Vous devriez maintenant être capable d’afficher les images de votre précédent blog que les mêmes URLs. Par exemple pour l’image wp-content/uploads/2014/11/vagrant_chilling.png vous devriez pouvoir y accéder via localhost:1313/wp-content/uploads/2014/11/vagrant_chilling.png

Nous allons pouvoir procéder de la même manière pour tous les articles et toutes les pages restantes.

monsite/tmp$ mv hugo-export/* ../content
mv: cannot move 'hugo-export/posts' to '../content/posts': Directory not empty
monsite/tmp$ mv hugo-export/posts/* ../content

Vos articles doivent maintenant apparaitre sur votre site Hugo. L’extension fonctionne somme toute très bien mais quelques erreurs sont apparus chez moi. Je vais les détailler à la section suivante.

Erreur 1: Du contenu HTML dans mes articles

Je ne sais pas si ceci est dû à l’extension Wordpress où aux différentes mise à jours de mon Wordpress au fil des années mais j’ai constaté que plusieurs de mes articles exportés contenait du code HTML directement dans le fichier Markdown. Ceci a pour effet d'être exclus de l’affichage par Hugo et remplacé par un joli 

Voici un exemple de code HTML présent dans mes exports

<div id="attachment_419" style="width: 235px" class="wp-caption alignnone">
  <a href="https://romain.therrat.fr/wp-content/uploads/2011/12/2011-12-25+23.50.50.jpg"><img class="size-full wp-image-419" title="Activation du mode téléchargement" src="https://romain.therrat.fr/wp-content/uploads/2011/12/2011-12-25+23.50.50-e1335987564698.jpg" alt="Activation du mode téléchargement" width="225" height="300" /></a>
  
  <p class="wp-caption-text">
    Activation du mode téléchargement d'un samsung galaxy S.
  </p>
</div>

Je constate ici que ce sont des images. Je n’en ai, au finale, que moins d’une dizaine je les ai donc modifiés à la main comme ceci:

{{<figure>
    <img src="https://romain.therrat.fr/wp-content/uploads/2011/12/2011-12-25&#43;23.50.50-e1335987564698.jpg"
         alt="Activation du mode téléchargement" width="225" height="300"/> <figcaption>
            <h4>Activation du mode téléchargement</h4>
        </figcaption>
</figure>
}}

Erreur 2: Des articles au format HTML

Je constate que quelques articles ont été réimportés au format HTML. Il s’agit d’article qui viennent de la première version de mon blog qui été hébergé sur blogger. Je pense qu’il sagit d’un bug d’import qui date … de 2008!

J’ai procédé assez simplement pour ces articles là en récupérant le contenu html (tous l’article dans mon cas) et en le convertissant en markdown.

cat fichier.md | sed -n '/^---/{ :a; n; p; ba; }'| sed -n '/^---/{ :a; n; p; ba; }' | pandoc -f html -t markdown

Ce n’est pas idéal et un contrôle manuel est nécessaire mais ceci était suffisant pour moi pour une grande majorité des pages.

Il me restait quelques trace de HTML de type

<span style="font-weight:bold;">EnableExtensions</span>

Je les ai modifié avec une simple commande sed.

sed -i 's@<span style="font-weight: *bold;">\(.*\)</span>@**\1**@g' *md
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash"></code></pre></div>

Lerm-IT