Drupal
08/10/2014

Pourquoi utiliser Jekyll avec Drupal ?

image
Qu'est-ce que Jekyll et d'où vient la renaissance des sites statiques et de leurs générateurs ? Pourquoi avons-nous choisi Jekyll ? Une petite explication qui motive nos transactions en la matière : Pourquoi utilisons-nous Jekyll avec Drupal ?... Bien que la route soit encore longue...

Qu'est-ce que Jekyll et d'où vient la renaissance des sites statiques et de leurs générateurs ? Pourquoi avons-nous choisi Jekyll ? Une petite explication qui motive nos transactions en la matière : Pourquoi utilisons-nous Jekyll avec Drupal ?... Bien que la route soit encore longue...

C’est quoi Jekyll ?

Jekyll est un générateur de site statiques écrit en Ruby.

Cela peut paraître tout à fait absurde par rapport à un CMS mais cela apporte bien des avantages si le projet le permet :

  • Au final c’est un site statique qui est uploadé sur le serveur (donc pas besoin de Ruby).
  • C’est difficile de faire plus rapide qu’un site statique.

Dans ce cas, pourquoi passer par un générateur ?

  • Un générateur permet de gérer plus facilement tous les assets du projet (CSS, JS, images et compression, etc.)
  • On peu utiliser des layout et des partials pour ne pas avoir à ré-écrire chaque fois son code.
  • Le contenu de chaque page est séparé de son affichage et lorsqu’on lance la génération du site, le générateur injecte le contenu dans le moule correspondant.

Un exemple simple de blog avec Jekyll

Dans le cas d’un blog, nous avons :

  • Un fichier de layout général qui contient tout l’HTML principal (doctype, head, métas) avec éventuellement footer, header et sidebars en partials. Ce fichier va également définir le comportement de la page d’accueil (affichage des X derniers posts). Jekyll utilise par défaut [Liquid] comme langage de templating.
  • Un autre layout pour l’affichage des billets de blogs.
  • Un répertoire contenant le contenu proprement dit (les billets).
  • Plusieurs choix sont possibles, mais par défaut ce sont des fichiers markdown un peu spéciaux. Ils ont un en-tête avec différentes variables pour le titre, l’auteur, la date et éventuellement les catégories du billet.
  • On peut également définir un layout différent de celui par défaut.
  • Un fichier de configuration (en yaml) qui va servir de chef d’orchestre et dire à Jekyll quoi faire pour la génération.

Lorsqu’on lance la génération :

  • Jekyll compile les différents assets suivant les règles prédéfinies ;
  • Génère les pages HTML à parti des fichiers sources markdown.
  • Jekyll peut générer également une sitemap, des archives, etc.
  • Il peut également parser les fichiers sources et transformer par exemple des liens vers flickr en mini-galeries d’images ou des liens youtube en players intégrés à la page. Il existe de nombreux plugins pour cela.

A noter que Jekyll permet aussi d’avoir un mode serveur où la compilation se fait à la volée et où on peut voir les résultats sur un serveur local.

Enfin, il existe des plugins pour pouvoir automatiquement déployer son site via FTP, SFTP, Git etc.
Jekyll est notamment très bien intégré à Github et c’est la solution recommandée pour générer les pages de présentation d’un projet.

Jekyll n’est pas limité aux blogs, on peut tout à fait réaliser un portfolio ou des pages produits en rajoutant les layouts correspondants. Il suffit en suite de définir dans chaque fichier source le layout à utiliser pour sa génération.

Si vous voulez en savoir plus :
http://code.tutsplus.com/tutorials/building-static-sites-with-jekyll--net-22211
http://www.andrewmunsell.com/tutorials/jekyll-by-example
http://jekyllbootstrap.com/

Pourquoi utiliser Jekyll avec Drupal ?

Pour accélérer Drupal

Drupal est un excellent CMS, mais avouons-le, le nombre de requêtes MySQL à lancer pour afficher une simple page (une fois Panels, Views, et autres installés) grimpe rapidement à plus de 1000. De quoi mettre rapidement le serveur moyen à genoux !

Certes il existe de nombreuses solutions de caching, soient intégrés à Drupal (Boost par exemple), soient externes comme l'utilisation d'un Reverse Proxy (Varnish). Mais pourquoi ne pas utiliser Drupal uniquement pour insérer, structurer, bref travailler le contenu, puis déléguer l'affichage de ce même contenu à une solution plus légère comme Jekyll ?

C'est l'expérience que l'agence Gizra a tenté il y a un an avec le projet Dekyll. Ils ont abandonné le projet depuis, mais ils continuent toujours à utiliser Jekyll via leur theme maison.

Quel intérêt ?

Les projets conséquents, responsives (quel projet ne l'est pas en 2014 ?) ne peuvent plus se contenter en phase d'analyse et de conception, de simples maquettes statiques jpeg ou psd. Il faut pouvoir présenter le projet de manière dynamique et interactive.

Et c'est ici que nous retrouvons nos sites statiques !

L'idée de Gizra est de minimiser au maximum le travail d'intégration de ces maquettes statiques au CMS Drupal, une fois qu'elles sont validées par le client.

  • Jekyll est un bon outil pour cela, on peut rapidement copier-coller la structure HTML des tpl de Drupal et la réutiliser sous forme de layouts de partials etc. Il n'y a plus qu'à les appeler pour construire une page compatible Drupal comme un jeu de légo.
  • On peut simplement utiliser sass ou tout autre préprocesseur de son choix.
  • On peut également profiter des outils fournis avec Jekyll pour vérifier, minifier, agréger et compresser ses ficiers CSS.
  • L'édition d'un contenu de texte en markdown est simple et directe.

Si la structure HTML de Jekyll suit la même logique que celle de Drupal, utilise les mêmes classes CSS, etc. Alors les assets générés par Jekyll peuvent être directement utilisés dans le thème Drupal. * Il suffit juste de dire au thème Drupal de chercher les fichiers au bon endroit. * Un intégrateur qui ne connaîtrait pas Drupal pourrait plus simplement travailler sur le thème. * etc.

Quand on regarde la qualité et la rigueur graphique des sites intégrés par Gizra, on peut prendre cette option au sérieux ! En tout cas c'est une piste à explorer pour nous !

Quelques liens utiles

Ludovic Coullet
Twitter : https://twitter.com/lcoullet