De Wordpress à Jekyll sur Github Pages

Cela faisait un moment que je voulais “jouer” avec les Github Pages, alors quand l’occasion s’est présentée, j’ai foncé et ne l’ai pas regretté. Je vous explique tout ça dans le détail.

Cas d’utilisation

Il y a plusieurs cas dans lesquels il peut être intéréssant de migrer un blog Wordpress vers Jekyll, parmi lesquels :

Archivage d’un blog moins ou plus du tout maintenu. Le passer sous Jekyll vous assure d’un futur « zéro maintenance ». En effet, même si vous ne publiez plus sur un site Wordpress, il vous faut quand même le maintenir à jour en terme de code, plugins… Sous peine de rencontrer quelques désagréments tôt ou tard.
Augmenter les performances de votre blog. Rien n’est plus performant qu’un site statique comme Jekyll.
Diminuer les coûts d’hébergements. Github Pages, c’est gratuit donc difficile à battre en terme de prix, même si on trouve des hébergements Wordpress tout à fait performants pour pas cher.
Autres. Les commentaires sont là si vous avez des idées…

De mon côté, c’est l’archivage d’un projet ancien que je ne maintiens plus faute de temps « mais pas que » qui m’a décidé à me lancer dans l’opération.

Le site en question proposait d’essayer les CMS Open Source les plus populaires du marché avant de les installer… Ou de la faire installer. Quand j’ai démarré ce projet en 2006, cela pouvait rester encore assez sportif d’installer certains de ceux-ci. Les choses ont bien changées… Et c’est tant mieux !

Allez, assez de bla et place à la recette.

Les ingrédients

Il vous faut les ingrédients suivants pour mitonner une bonne migration de Wordpress à Jekyll :

Un blog Wordpress à migrer.
Un plugin comme Wordpress Jekyll Exporter
Un environnement pouvant exécuter Jekyll
Un compte Github.

La recette

Maintenant que les ingrédients sont réunis, reste à voir les différentes étapes à accomplir pour arriver à héberger ce futur ancien blog Wordpress sur Github Pages.

Exporter les données

Exporte les données se résume à utiliser un des plugins pour Wordpress permettant de créer des fichiers texte compatibles Jekyll. C’est simple à faire et le résultat, même s’il demande quelques corrections à posteriori sur les contenus est tout à fait satisfaisant, notamment en ce qui concerne la génération correcte du front matter Yaml. Voici un exemple de ce que ça a donné pour moi :

---
title: Joomla 1.5.6
author: Olivier Jan
layout: post
permalink: /2008/08/joomla-156/
categories:
  - Joomla
tags:
  - CMS
---

L’auteur, les catégories et les tags sont correctement renseignés. Ces fichiers sont donc tout à fait utilisables par Jekyll en l’état.

Attention, seules les pages de contenu passe à travers ce genre de moulinette. Les formulaires de contact et autres pages “dynamiques” construites à base de shortcodes Wordpress ne passeront pas complètement. il faudra les reprendre ensuite.

Créer un dépôt pour le site web

Puisque le blog Jekyll va être hébergé sur Github Pages, il faut créer un dépôt pour l’accueillir. Le mien se trouve ici.

Reste à mettre dans ce dépôt le contenu exporté de notre Wordpress “encapsulé” dans un un blog Jekyll.

Préparer un blog Jekyll

J’ai d’abord créé une machine virtuelle avec Vagrant pour accueillir mon projet.

J’ai ensuite utilisé comme à mon habitude le générateur Jekyll pour Yeoman pour créer un nouveau projet Jekyll.

Celui-ci possède en effet une option particulièrmeent intéressante puisque la simple commande grunt deploy permet de construire un site Jekyll et de l’envoyer direct vers Github Pages; ce qui est le but recherché !

Une fois le site Jekyll créé avec yo jekyllrb, il suffit de remplacer le contenu par défaut avec l’export obtenu depuis Wordpress.

Choisir ou coder un thème

Il serait possible sans autre forme de procès de passer à la publication du site ainsi créer, mais le thème par défaut de Jekyll est un peu moche, alors autant en changer, surtout que cela peut se faire à peu de frais.

Après avoir regardé du côté de ThemeForest, et Jekyll Themes, j’ai opté pour du « classique » avec Lanyon, qui est un thème simple et tout à fait bien né côté code.

Publication du blog jekyllisé

Maintenant que nous avons un blog « jekyllisé », il reste à le publier sur Github pages.

Github Pages permet de publier un site par compte Github et un par projet, avec ou sans Jekyll. Exactement ce qu’il nous faut.

Créer une branche gh-pages

Il faut commencer par céer un nouvelle branche gh-pages dans le dépôt du projet. Cette branche accueillera le résultat de la commande jekyll build, en d’autres termes notre site prêt à être servi.

Créer un fichier CNAME

Pour que notre blog soit consultable sur son adresse originelle, http://cms-fr.net dans mon cas, il reste à créer un fichier CNAME à la racine du projet contenant simplement le nom de domaine devant être résolu, soit cms-fr.net pour moi.

Déployer le site

Après avoir vérifié en local, dans votre machine virtuel, que le résultat obtenu est bien celui escompté, il reste à exécuter un grunt deploy pour que le site soit construit en local dans le dossier dist et que soient envoyés puis validés ces changements automatiquement sur la branche gh-pages du projet. Du tout bon !

Conclusion

Me voilà tranquille sera ma conclusion. Ce site, ainsi publié ne me demandera plus aucun moyen dans le futur, que ce soit en terme de temps ou de finance, au moins tant que Github reste vivant ! Et c’est bien ce que je recherchais au départ, sans compter le bonus performance comme le démontre ces deux écrans tirés de la console Check my Website après migration.