Passer de WordPress à Jekyll – Première partie

Ceux qui suivent ce blog depuis ces débuts, ou qui me suivent sur Twitter, savent que je suis très attaché au développement de WordPress. Logiciel open source, énorme communauté, des directions et des choix auxquels j’adhère, WP a tout pour me plaire.

Heureusement, cela ne veut pas non plus dire que je ne suis pas prêt à essayer autre chose. La preuve en est, cette nouvelle version du blog a non seulement un nouveau design, mais un moteur totalement nouveau pour l’entraîner !

Mise à jour : la seconde partie de cet article avec les détails pour passer de WordPress à Jekyll est en ligne. Si vous êtes déjà convaincu et que vous souhaitez switcher, je vous conseille de passer à la deuxième partie dès maintenant !

Ces dernières années, WordPress a su se développer pour permettre de plus en plus de choses aux développeurs. Custom post types, thèmes parents et enfants, post formats, il y en a pour tous. Mais c’est justement ce qui m’a poussé à me tourner vers quelque chose de plus petit, plus léger, plus rapide. Parce qu’après tout, mon blog n’a peut être pas besoin de toutes ces fonctions…

Jekyll, une façon simple de gérer votre site depuis votre éditeur de texte favori

Rentrons donc dans le vif du sujet : Jekyll ! Jekyll est un outil de génération de pages statiques. Basé sur Ruby, Jekyll vous laisse créer des templates HTML, dans lesquels vous allez pouvoir utiliser le langage Liquid. Vous allez donc pouvoir construire votre propre organisation de templates grâce aux includes que permet Liquid. Une fois votre système de templates créé, vous pouvez commencer à écrire des articles.

Vous pouvez écrire vos articles dans le markup que vous préférez : HTLML bien sûr, mais aussi markdown ou textile. L’idée derrière ce soft est de vous laisser écrire depuis votre éditeur directement, dans votre environnement préféré. Une fois que c’est fait, et lorsque vous faites tourner Jekyll, celui-ci passe ces articles dans vos templates, et créé un site statique pour afficher toutes les pages de votre site.

Rien de plus simple finalement, et cela signifie que vous n’avez plus besoin de base de données, pas besoin de langage serveur, vos visiteurs se rendront compte de la différence de vitesse tout de suite !

Voici la base de l’organisation d’un blog sous Jekyll :

	.
	|-- _config.yml
	|-- _layouts
	|   |-- default.html
	|    -- post.html
	|-- index.html
	|-- _site
	 -- _posts
		|-- 2011-08-25-votre-premier-post-avec-jekyll.html
	     -- 2011-08-26-votre-deuxieme-post-avec-jekyll.html

• Le fichier _config.yml vous permet de configurer des paramètres pour tout votre site au moment où Jekyll tourne et génère votre site.
• Le dossier _layouts qui contient vos différents templates. Par défaut, vous commencez avez un template général, et un template pour vos pages d’articles.
• Le fichier index.html, qui est votre page d’accueil, comme vous l’aurez deviné.
• Le dossier _site, qui va contenir tout votre site une fois qu’il sera généré par Jekyll.
• Le dossier _posts qui contient tous vos articles, dans votre langage de choix.

Au début de chaque article, des détails de base concernant votre article sont à renseigner dans le YAML front matter. Puisque c’est toujours plus facile à comprendre avec un exemple, voici un exemple d’article.

J’y précise donc en en-tête de l’article le titre, la meta description, les catégories et les tags, ainsi que le statut (publié). L’URL de l’article ainsi que la date de publication sont mentionnés dans le nom de fichier. Vous pouvez y ajouter d’autres précisions si vous le souhaitez.

Quels sont les avantages et inconvénients de cette méthode ?

Après tout ça, vous devez sûrement vous demander pourquoi je bosse avec cet outil. Voici donc de quoi vous aider à peser le pour et le contre.

Jekyll : avantages

• Vous pouvez éditer vos articles dans votre éditeur de texte favori.
• Vous pouvez le faire dans le markup qui vous est le plus confortable.
• Plus besoin de base de données !
• Plus besoin non plus de mettre a jour quoi que ce soit une fois que vos articles sont en ligne (pas de mise à jour de software)
• Vous pourrez retrouver tous les fichiers de vos articles en plat sur votre ordinateur : très facile a chercher donc !
• Vous allez pouvoir utiliser GIT pour gérer toutes les révisions, mais aussi pour publier, updater. Le process est très simple : vous écrivez, vous commitez, et vous poussez.
• Comme vous écrivez depuis votre éditeur de texte, vous pouvez utiliser tous les raccourcis, plugins et scripts que vous avez pour écrire rapidement avec un markup propre et sans les problèmes de code que l’on peut parfois rencontrer en passant de l’éditeur visuel au HTML dans WordPress par exemple, ou en copiant du texte d’un autre programme.
• Vous pouvez intégrer ce que vous voulez dans vos articles, pas de limites !
• Il est très simple de se créer plusieurs templates, et ensuite de passer de l’un à l’autre pour chacun de vos articles : pourquoi ne pas avoir des couleurs différentes en fonction de la catégorie de votre article par exemple ?
• Votre site sera rapide ! Regardez par exemple le graph ci-dessous, tiré directement de Google Webmaster tools. je vous laisse deviner à quel moment j’ai mis cette nouvelle version en ligne ! :) Mon page Speed score pour ce site est maintenant de 88/100, les seuls problèmes restants proposés par Google sont en relation avec les scripts extenes (Twitter, Google JS API).

Inconvénients de Jekyll

• Comme votre site est entièrement statique, certaines fonctionnalités vont être manquantes : c’est le cas des commentaires par exemple. J’utilise maintenant Disqus à la place de mes anciens commentaires, qui fonctionne via Javascript. C’est aussi le cas des formulaires de contact. Pour le moment, je n’en ai plus.
• Si vous utilisiez beaucoup le gestionnaire de médias de WordPress, cela peut être difficile de repasser à une gestion à l’ancienne des images.
• A chaque fois que vous faites un changement sur le site, vous allez devoir regénérer le site complet. Sur ce site, je n’ai pas beaucoup d’articles donc cela ne prend que quelques secondes, mais j’imagine que si vous aviez un site avec plusieurs centaines d’articles, la génération pourrait prendre quelque temps.
• Certaines fonctionnalités comme les catégories ou les tags sont manquantes dans le core de Jekyll, ils devront être gérés par des plugins.

Déploiement de votre site

C’est très simple de commencer à travailler avec Jekyll sur votre machine : il suffit d’installer la gem, plus les quelques dépendances qui vont avec, et vous pouvez commencer. La gem contient aussi un serveur HTTP pour vous permettre de visualiser vos changements, rendant la chose encore plus facile.

Une fois que votre site est prêt, il ne vous reste plus qu’à le déployer. C’est là que Git entre en jeu : si vous avez un compte Github, vous allez pouvoir pousser votre site Jekyll dans un repository sur Github, et c’est tout ! En effet, Github peut héberger votre propre site web, et utilise aussi Jekyll comme moteur de ses pages. Il vous suffit donc de pousser sur votre repo pour publier une nouvelle version de votre site. La génération de votre site sera faite par Jekyll sur les serveurs de Github.

A vous maintenant !

Je rentrerai dans les détails dans un article la semaine prochaine, afin de guider ceux d’entre vous qui souhaiteraient faire le switch. Mais je suis curieux d’avoir vos impressions, donc n’hésitez pas à donner votre avis dans les commentaires !

• Deuxième partie : comment passer de WordPress à Jekyll, le tutoriel