Passer de Wordpress à Jekyll

  5 mins read  

Il y avait longtemps que j’avais envie d’essayer Jekyll. C’est fait ! J’ai migré ce blog de Wordpress vers Jekyll (vous pouvez, pendant encore quelque temps, consulter la version Wordpress de ce blog, qui naturellement ne sera plus mise à jour).

Je consigne ici quelques notes sur la démarche que j’ai utilisée pour la migration.

Récupération des billets du blog

Jekyll propose un outil spécifique, appelé Jekyll-import, pour importer dans Jekyll des contenus provenant de différents CMS et plateformes de blog. Naturellement, cet outil propose une méthonde pour faire l’import depuis Wordpress, mais il est prévu pour se connecter directement à la base de données du Wordpress. Mon Jekyll n’est pas installé chez le même hébergeur que mon Wordpress, aussi, il aurait fallu que je fasse un dump de ma base de données, que je l’importe ailleurs (sur ma machine personnelle, par exemple) avant de faire la migration. Rien d’inabordable, mais je suis trop paresseux :) J’ai donc préféré utiliser le connecteur pour RSS. Le fil RSS du blog est accessible en ajoutant feed à la fin de l’adresse du blog (http://liltools.lacherez.info/feed en l’occurrence).

Toutefois, jekyll-import utilise l’élément <description> de chaque billet présent dans le fichier RSS. Or cet élément contient, comme on peut s’en douter, uniquement un résumé du billet, le contenu complet étant dans l’élément <content:encoded>. J’ai donc modifié la fonction self.process() du fichier jekyll-import-0.14.0/lib/jekyll-import/importers/rss.rb (dans le répertoire où sont stockés les gems ruby). La modification ne porte que sur la dernière ligne de la fonction (avant les end, à la ligne 59 du fichier)

 # [...]
 # Process the import.
 #
 # source - a URL or a local file String.
 #
 # Returns nothing.
 def self.process(options)
   source = options.fetch("source")

   content = ""
   open(source) { |s| content = s.read }
   rss = ::RSS::Parser.parse(content, false)

   raise "There doesn't appear to be any RSS items at the source (#{source}) provided." unless rss

   rss.items.each do |item|
     formatted_date = item.date.strftime("%Y-%m-%d")
     post_name = item.title.split(%r{ |!|/|:|&|-|$|,}).map do |i|
       i.downcase if i != ""
     end.compact.join("-")
     name = "#{formatted_date}-#{post_name}"

     header = {
       "layout" => "post",
       "title"  => item.title,
     }

     header["tag"] = options["tag"] if !options.to_s.empty?

     FileUtils.mkdir_p("_posts")

     File.open("_posts/#{name}.html", "w") do |f|
       f.puts header.to_yaml
       f.puts "---\n\n"
       #f.puts item.description # Ancienne ligne
       f.puts item.content_encoded # Nouvelle ligne
     end
   end
 end

Récupération des images du blog

L’import RSS ne permet pas de récupérer les images du blog Wordpress (l’import Wordpress non plus d’ailleurs), il m’a donc fallu trouver une solution pour les images. J’ai fait le choix de simplement rechercher dans les contenus des billets les références aux images, de télécharger ces images dans un répertoire spécifique et de récrire les références avec cette nouvelle adresse. A noter que certaines de mes images, pour une raison que je ne connais pas (peut-être qu’un jour ce blog a été hébergé sur wordpress.com), avaient une adresse en wp.com.

Le script que j’ai écrit pour cet usage se trouve sur Github, j’en parlerai dans un prochain billet.

Images de couverture

Il existe beaucoup de thèmes de toutes sortes pour Jekyll. Pour ma part, j’ai choisi Sleek.

Puisque mon thème les utilise, j’ai ensuite dû récupérer les images de couverture (ce que Wordpress appelle “Image mise en avant”) qui servent, selon les thèmes Wordpress, de vignette ou d’entêtes pour les articles. Comme je n’avais pas beaucoup de ces images, je les ai téléchargées à la main.

Il a ensuite fallu les adapter à ce qu’attend le thème pour ces images : que ce soient des JPEG (mes vignettes sont souvent des captures d’écran, au format PNG) et que, pour chacune, il existe la version de base (par exemple image.jpg), utilisée comme entête lors de l’affichage du billet, une version réduite, utilisée comme vignette sur la page d’accueil (dans notre exemple image_thumb.jpg) et une autre version utilisée pour remplacer la vignette pendant qu’elle se charge (image_placehod.jpg).

Je convertis donc toutes mes images en JPG (je suis dans un répertoire où je n’ai que mes images de couverture, assets/img/posts):

$ ls *.*|sed 's/\(.*\)\.\(.*\)/convert \1.\2 \1.jpg/' |sh

Comme toujours, j’utilise sed pour générer les lignes de code nécessaires, je les vérifie puis j’ajoute le |sh de la fin pour les exécuter.

Je génère alors les vignettes, qui sont la même image avec une largeur de 535 pixels et un suffixe _thumb avant l’extension .jpg :

 $ ls *.jpg|sed 's/\(.*\)\.\(.*\)/convert \1.jpg -resize 535 \1_thumb.jpg/'|sh

Enfin, je crée le placeholder pour chaque image. J’ai choisi d’utiliser la même image comme placeholder pour toutes, je l’ai appelée pl.jpg. Je la copie donc plusieurs fois en lui donnant un nom différent, correspondant à chacune de mes images de couverture. Naturellement, je n’applique pas ce traitement à pl.jpg lui-même, d’où le grep -v pl.jpg, ni aux images qui sont déjà dérivées des images de base (les vignettes, suffixe _thumb, et les placeholders, suffixe _placehold), d’où le second grep : grep -v '_placehold\|_thumb'

 ls *jpg|grep -v pl.jpg|grep -v '_placehold\|_thumb'|sed 's/\(.*\)\.jpg/cp pl.jpg \1_placehold.jpg/'|sh