Migrer un blog de Wordpress vers Jekyll

le 11 décembre 2014, par Jean-Philippe Caruana

Suite à la migration de notre blog vers un jekyll hébergé chez github, je vous propose quelques explications sur le sujet. Dans cet article, nous verrons :

  1. comment utiliser Jekyll
  2. comment migrer de Wordpress vers Jekyll
  3. comment héberger son blog (ou tout site statique) chez github

On y va ?

Utilisation de Jekyll

Jekyll est un moteur de génération blog statique créé par (un ancien de chez) github. Il est écrit en ruby, donc cet article fait l'hypothèse que vous avez déjà ruby et ruby-gem d'installés sur votre poste de travail.

Pour installer jekyll, une commande gem suffit. Ainsi, pour installer jekyll et créer le blog "from scratch" :

Ensuite, la commande jekyll serve vous lance le site en local sur le port 4000 : puis vous ouvrez le lien http://0.0.0.0:4000/ pour voir votre blog en local.

L'utilisation est simple : après avoir fait le design de votre site (en éditant le fichier index.html et tout ce qui se trouve dans le dossier _layout), la création d'un fichier dans _posts publie un nouvel article.

Il vous faudra respecter plusieurs conventions :

  • le nommage : le fichier doit comporter la date de publication dans son titre, par exemple pour un article publié le 24 décembre 2003, le fichier devra se nommer 2003-12-24-mon-article.md
  • le fichier devra commencer par le front matter. Il s'agit de meta-informations décrivant l'article et doit comporter au minimun les champs layout et title. Pour un article de blog, utilisez le layout post (qui sera mis en forme selon les indications données dans le fichier _layouts/post.html) :
---
layout: post
title: Titre de votre article
--

Ici, le contenu de votre article, dans votre format préféré à choisir parmi Markdown ou Texile
(personnellement, j'ai choisi markdown)

Si vous voulez travailler sur un brouillon, vous créez votre fichier dans le dossiers _drafts : ces fichiers ne sont pas publiés. Vous pouvez en revanche les lire avant publication en local en lançant jekyll avec l'option drafts :

L'option watch ordonne à jekyll de surveiller le répertoire du site et de le regénérer à chaque changement de contenu.

Ainsi, la publication d'un article se résume à déplacer un fichier de _drafts vers _posts tout en respectant les normes de nommage.

Migrer un Wordpress vers Jekyll

Récupérer les anciens articles

Dans notre cas, nous avions déjà un blog depuis 2010. Nous voulions donc migrer tous les articles existants en conservant le maximum de contenu et sans changer les URL des articles pour des raisons évidentes de compatibilité des bookmarks ou références à nos articles.

J'avais déjà tenté une migration 1 an auparavant, mais j'étais ressorti de cette expérience avec un goût de "pas fini" dans la bouche : gros soucis d'encodage de tous les articles, imports partiels, processus très compliqué.

Mais les choses avancent ! Depuis, le processus de migration depuis un Wordpress auto-hébergé s'est grandement simplifié. Tout est documenté dans le site Jekyll Import. Des tas de types de blog sources sont possibles (Blogger, Joomla, Typo...), mais ici nous allons nous intéresser à la migration depuis un Wordpress autohébergé : http://import.jekyllrb.com/docs/wordpress/

Pour la migration depuis un Wordpress auto-hébergé, nous avons la possibilité de nous connecter au MySQL et d'en extraire tous les articles publiés. Notez-cependant que les brouillons en cours ne seront pas importés, il faudra le faire à la main (ou proposer un patch).

Comme jekyll, jekyll-migration est écrit en ruby. Il y a donc quelques gems à installer sur votre poste, en particulier la gem MySQL :

Et c'est là que les choses se compliquent ! Je ne sais pas si vous êtes tous dans mon cas, mais j'ai toujours rencontré les pires difficultés pour installer la gem mysql. Ici, il y a même la gem mysql2... En tout cas, il faut que vous ayez de quoi parler MySQL depuis votre poste. Sous Ubuntu, il faut installer le paquet libmysqlclient-dev avant d'installer la gem mysql/mysql2.

Ensuite, pensez à ouvrir le port MySQL vers votre machine. Avec iptable, cela s'écrit ainsi :

Je vous invite à tester la connexion vers le MySQL de votre blog depuis votre machine en utilisant le client mysql en local.

Ensuite, il faut lancer une commande magique. La commande est magique, car la documentation n'est pas à jour, certaines options sont devenues obligatoires, d'autres ont carrément disparu. Je suis arrivé (de mémoire) à la commande suivante :

Tous vos articles sont présents ! Ils sont au format HTML ; vous attendrez d'écrire un nouvel article pour utiliser un langage de Markup plus simple, comme Markdown par exemple.

Réglages fins

Il vous reste à résoudre le problème des URL. Par défaut, jekyll met la date de l'article dans l'URL, contrairement à ce que faisait Wordpress. C'est un point qui m'angoissait particulièrement, car j'avais peur de ne pouvoir y parvenir, et des URL incompatibles avec les anciennes était synonyme de "no go" comme on dit : tous les liens pointant vers notre sites cassés, tout l('excellent) référencement de nos articles chez les moteurs de recherche cassé... bref ! une catastrophe.

Mais je me suis noyé dans un verre d'eau.

En fait, c'est tellement bête que j'ai failli en pleurer : à la racine du blog se trouve un fichier dont l'importance est capitale : _config.yml. C'est le fichier qui regroupe toute la configuration du blog. Il faut changer la ligne :

permalink: /:year/:month/:title

en

permalink: /:title

Et tout est l'avenant ! Configurer un compte Google Analytics ? La variable gaaccount est là pour ça ! Mettre en place des commentaires avec disqus ? Il y a aussi une variable pour cela (nommée... disqus).

Pour les commentaires disqus, il faut ajouter un comments: true dans le front matter.

On peut aller beaucoup plus loin, en fouillant un peu dans le code source si vous êtes développeur. À titre d'exemple, c'est assez immédiat de faire apparaître des tags et des catégories en fin d'article.

Héberger son blog chez Github

Enfin, héberger votre blog chez github est élémentaire. Par héberger, j'entends "c'est github qui sert le contenu de votre blog".

Pour cela, vous avez 2 options :

Voyons cela point par point :

Utiliser une URL en github.io

Il faut respecter quelques conventions et cela marche tout seul (chapeau bas aux équipes de github) :

  • votre repository doit s'appeller monuser.github.io
  • le site doit être dans la branche master
  • c'est tout !

À chaque git push sur votre branche master, github génère le site statique et le rend disponible partout.

Notez que github permet d'héberger également un site statique pour votre projet open source. Dans ce cas, le code de votre site doit se situer dans une branche nommée gh-pages. Ainsi, pour un utilisateur nommé monuser et un projet nommé monprojet, le site sera disponible à l'adresse http(s)://monuser.github.io/monprojet. Voir par exemple http://jpcaruana.github.io/presentation_buildr/.

Utiliser une URL personnelle

Pour cette option, c'est un petit peu plus compliqué, mais pas tellement :

  • toutes les règles précédement énnoncées s'appliquent :
    • votre repository doit s'appeller monuser.github.io
    • le site doit être dans la branche master
  • il faut créer à la racine de votre projet un fichier nommé CNAME qui ne contient que l'URL de votre site, sans wildcard
  • il faut ajouter dans votre DNS un enregistrement de type CNAME qui pointe vers monuser.github.io
  • attendre que le DNS se propage.

Dans notre cas, le fichier CNAME est accessible à tous pour vous en inspirer et le DNS est configuré ainsi (le point final est très important : il représente le serveur DNS racine, et cela ne fonctionnera pas sans) :

www 10800 IN CNAME barreverte.github.io.

Une fois tout ceci en place, votre site ne sera plus accessible sur l'URL monuser.github.io : par exemple, http://barreverte.github.io/ redirige vers http://www.barreverte.fr/

Conclusion

Ouf ! Nous sommes arrivés au bout !

Ce n'était finalement pas très difficile, même si j'ai trouvé la documentation souvent éparpillée et parfois imprécise ; c'est pourquoi j'ai voulu rédiger cette page pour permettre à d'autres de gagner du temps si ils désirent ouvrir un blog gratuitement. J'espère que cela pourra rendre service.

N'hésitez pas à me suggérer des corrections, améliorations, que ce soit en commentaires en fin d'article ou en proposant une pull request.

Références

Barre Verte a migré

le 5 décembre 2014, par Jean-Philippe Caruana

Nous venons de terminer la migration de Barre Verte : auparavant, nous nous hébergions nous-mêmes sous Wordpress chez Gandi, désormais, nous utilisons Jekyll hébergé (gratuitement) par Github.

MongoDb le cluster qui bagote

le 11 octobre 2014, par Philippe Blayo

Mug MongoDB Un soir, un développeur lâche en partant : « MongoDb c’est de la merde. Leur réplication ça marche pas. Je parie qu’on a aussi le bug en prod. Pour un peu j’en jetterais ma tasse mongo par la fenêtre. »

Les héros du bagot

le 19 juin 2014, par Bruno Thomas

hudson_trends

Cela fait 6 ans que nous faisons des tests fonctionnels (ou d'acceptance). Tests FitNesse, GreenPepper, Concordion avec ou sans IHM (Selenium par ex). Une chose reste constante, c'est la difficulté de stabiliser ces tests. Les approches sur le sujet dans les conférences sont variées, mais l'énergie mise dans la maintenance de ces tests semble toujours importante.

Le défi est double : avoir des tests qui s'exécutent rapidement, et dont la stabilité permet de détecter de manière certaine les régressions fonctionnelles. Ce que nous constatons sur les 4 projets qui ont mis en oeuvre des tests d'acceptance, c'est que le non-déterminisme de la plupart des tests provoque des bagotements (flaky tests). Tant et si bien que nous avons donné un nom à ces défauts de déterminisme : les bagots. Le soucis avec ces bagots, c'est qu'ils empêchent de décider si un test est rouge pour une bonne raison (une régression), ou pour une mauvaise raison (typiquement une mauvaise séquence d'accès concurrents du test).

Ces tests sont "probabilistes" : lorsque l'ordonnanceur partage équitablement le temps entre les différentes unités de calculs (process, threads), le test est vert. Avec une machine lente ces tests sont plus fréquemment rouges. Une sélection inattendue de ses maigres ressources provoquerait le même comportement. Dans une équipe avec le même environnement de développement (garanti par l'utilisation d'une image en chroot), le développeur ayant la plus mauvaise machine a le plus de chance de reproduire les bagots : un événement reste trop longtemps dans un bus de données, un réplicant mongoDB "laggue" alors que nous allons y lire une valeur... le test est rouge.

Il existe une multitude de manière de reconnaître ces tests. Un fort "smell" est constituée par l'utilisation d'un sleep : nous sommes alors dans le monde du test probabiliste. Le test est rouge ? Passons l'attente de 1 à 5 secondes. Allez, 10 secondes pour être sûr. Ça ne vous dit rien ? On me dit Courage ? Non, jamais entendu parler : supprimer ces 5 lettres suivies d'un entier est souvent un "refactoring" qui aura des répercussions profondes.

Sur notre dernier projet, nous avons beaucoup de code javascript exécuté dans le navigateur. L'ergonomie en est largement améliorée, mais la gageure des tests d'acceptance est encore plus grande. Nous avons parfois passé plusieurs jours, plusieurs semaines avant de résoudre un bagot (et parfois même échoué). Alors pour les héros qui ont pris leur courage à deux mains, et ont stabilisé ces tests, nous allons vous raconter leurs histoires, des histoires de bagots.

Notes sur l'Agile Conférence 2014

le 28 mai 2014, par Bruno Thomas

Ça se passait les jeudi-vendredi 22 et 23 mai toujours au chalet de la porte jaune. Cette année, la conférence suivait au moins 2 fils. L'un explicite "le fil rouge", activité de médiation graphique omniprésente et l'autre en trame, avec une résonance entre la keynote de Régis Médina sur le produit lean et les sessions qui ont suivi.

L'après-XP pour du développement produit

Avis de non-responsabilité : pratiquant l'XP depuis 7 ans, en partie avec Antoine C, et travaillant avec David B, membre de l'équipe d'organisation les propos suivants sont éventuellement subjectifs ;)
Cette keynote était une bonne introduction, une synthèse construite autour de l'expérience de Régis parti de l'extreme programming pour faire du lean. Ce ne sont plus des pratiques lean (les liens ci-dessous) qui sont expliquées mais l'utilisation de ces pratiques au service d'un nouveau modèle de gestion du système de production logicielle. Le marché a changé, l'open source, les plate-formes de téléchargement (apple store, android store...), les éditeurs, mettent en compétition énormément d'acteurs. Pour sortir du lot, il faut créer un effet "whaoo!!".

Créer un chroot (part. 2) : se connecter

le 22 avril 2014, par Philippe Blayo

Dans un précédent billet, nous avons créé un linux de base. Son arborescence a maintenant besoin d'être rattachée à la machine sur laquelle elle va s'exécuter. Pour cela nous allons répliquer les pseudo-systèmes de fichier /dev /proc et /sys déjà présents sur la machine :

    • /proc contient les infos sur les processus en train de tourner
    • /sys contient des informations système sur comment créer les périphériques (numéros de séries...)
    • /dev contient les fichiers d'accès aux périphériques eux-même (recréés dynamiquement par udev à chaque redémarage à partir des infos de /sys)

Le fichier complet

Créer un chroot (part. 1) : un linux de base

le 16 avril 2014, par Philippe Blayo

Notre environnement standardisé va s'appuyer sur chroot. Pour l'initier, utilisons le package debootstrap :
sudo apt-get install debootstrap
Il crée des arborescences Debian ou Ubuntu. Pour voir quelles versions sont disponibles :
dpkg -L debootstrap | grep scripts/ | awk -F / '{print $NF}'
  • dpkg -L liste tous les fichiers du package
  • grep scripts/ sélectionne les scripts
  • awk -F / '{print $NF}' sélectionne leur nom

Lean Agile Camp : la valeur avance masquée

le 18 décembre 2013, par Philippe Blayo

reviewRadioFrancePrésent à la première rencontre du Lean Agile Camp, Barre verte! livre ses impressions sur l'atelier la voix du client. Le but est de décortiquer une application sous l'angle du livre Job to be done qui prends comme paradigme que l'utilisateur recrute une application pour faire un travail à sa place. Nous choisissons l'application Radio-France pour android car elle a des notes au dessus de la moyenne et plus de 900 commentaires. Cette application permet d'accéder à toutes les radios du groupe. Nous décrivons la valeur que nous y voyons :

Ecrire un livre en 5 jours : converger vers l'objectif

le 1 août 2013, par Bruno Thomas

Nous sommes lundi, au matin du 3e jour. Où en sommes-nous ? Nous avons déjà pas mal de matière, mais elle reste à organiser. Nous ne savons pas vraiment où nous en sommes.

3e jour

Au flash meeting nous constatons que les parties agile et lean ne sont pas en cohérence. Cela empêche le déclic de se faire pour le lecteur. Nous pensons que ce serait mieux si le contour de chaque partie lean est faite en ayant déjà la partie agile. Nous prévoyons de travailler "en vertical" sur le pivot de chaque chapitre du livre : le passage de l'agile vers le lean. L'objectif du jour est de terminer les parties agile, et l'aperçu des parties lean.