À propos du site

Ce site est statique, c’est à dire que les pages et leurs contenus venant du même domaine sont envoyées tel quel par le serveur, sans aucune création à la volée1.

Si la technique ne vous intéresse pas, vous pouvez aussi en apprendre plus sur moi.

Avec Jekyll, le statique c’est fantastique

Tout le site est généré par Jekyll à partir de documents rédigés en syntaxe Markdown2. Il a été généré pour la dernière fois le 25/04/2017.

Pour migrer les centaines de contenus rédigés depuis 2001 en syntaxe spécifique SPIP3, j’ai développé un plugin SPIP → Markdown qui transforme tant que possible cette syntaxe spécifique en syntaxe Kramdown, y compris avec le YAML Front Matter.

Quelques plugins

De nombreux plugins existent dans l’écosystème Jekyll pour enrichir la solution de base, mais comme partout, tous ne fonctionnent pas bien, certains imposent des modes de fonctionnement contradictoires, ou tout simplement ne sont pas suffisamment configurables. Attention, la plupart de ces plugins empêchent d’utiliser la génération automatique de pages des Github Pages.

Les images bénéficient de mon plugin Jekyll Cloudinary pour utiliser le service SaaS Cloudinary afin de générer les différentes versions nécessaires au Responsive Web Design, tout en optimisant au mieux la performance.

Concernant toujours les images, mais aussi tout autre fichier que je voudrais associer à un billet (PDF ou autre), mon plugin jekyll_post_files permet de les déposer dans le même endroit que le fichier Markdown, ce qui facilite grandement la publication.

Les tags sont supportés nativement par Jekyll, mais largement améliorés par le plugin Jekyll Tagging qui génère les pages individuelles pour chaque tag, ainsi que le nuage de tags visible en page d’accueil.

Les pages d’archives par année et mois sont générées par le plugin Jekyll Archives4.

Dans la mesure du possible, les ressources externes sont chargées en asynchrone pour ne pas pénaliser votre navigation, voire même uniquement à la demande, comme c’est le cas des vidéos Youtube grâce au plugin Jekyll Youtube Lazyloading qui n’affiche qu’une image en attendant que le visiteur clique pour vraiment charger la vidéo.

Les tweets sont chargés à l’aide du plugin Lazy Tweet Embeding qui permet de juste écrire l’URL du tweet sur une ligne, difficile de faire plus simple.

Ce plugin m’a inspiré la création d’un autre similaire pour les vidéos de Youtube ou Vimeo, en cours de développement.

Les images pour illustrer les pages de tags et les meta opengraph utilisent le plugin Jekyll File Exists.

La webperf

La performance des sites Web fait partie de mes dadas depuis plusieurs années, étant avant tout frustré en tant que simple visiteur par les sites plus lourds et lents les uns que les autres.

Produire un site en statique aide à optimiser cette performance, la génération de pages à la volée n’étant plus nécessaire. Mais je me suis attaché à vraiment proposer une expérience très agréable aux visiteurs, avec un site particulièrement performant.

Pour cela, plusieurs recettes ont été combinées :

Pour les opérations de base type concaténation et minification des CSS et JS, plus ajout d’un hash pour forcer un cache long au navigateur, le plugin Jekyll Assets, basé sur Sprockets, est incontournable. Il permet même de facilement insérer dans le HTML généré des bouts de CSS, JS et même SVG.

Pour les fontes, j’ai adapté ce que Zach Leatherman —de Filament Group— présente dans son billet Flash Of Faux Text (FOFT) approach : les fontes de base — PT Serif pour le texte et PT Sans Bold pour les titres — sont chargées en priorité, et les variantes (gras, italique, combinaison des deux) sont chargées ultérieurement, avec un impact visuel minimal. Un brin complexe à expliquer, mais le résultat est impressionnant par rapport aux pratiques les plus courantes.

Pour les images, la syntaxe standard <img srcset sizes> générée par mon plugin Jekyll Cloudinary est parfaite : elle suffit dans 95 % des cas, est plus légère dans le HTML, et plus optimisable par les navigateurs.

Les ressources externes, sources potentielles de troubles, sont principalement :

  • les players de vidéos, dont Youtube, Vimeo ou Dailymotion
  • les widgets de certains services, dont Ulule, Speakerdeck ou Slideshare
  • Google Analytics, pour savoir un peu ce qu’il se passe sur le site
  • Disqus, pour les commentaires, comme nous allons le voir ci-après

Les commentaires

Passer au statique m’a fait perdre les commentaires que j’avais nativement dans SPIP, et je me suis résolu à passer à Disqus pour ne pas perdre l’apport des discussions, bien que je n’aime pas trop que les commentaires soient du coup hébergés ailleurs.

Je commence aussi à implémenter WebMention5 pour explorer une nouvelle technique standard de dialogue inter-blogs.

Et la recherche

La mise en place d’un moteur de recherche interne sur un site statique n’est pas plus simple que pour les commentaires. Il faut nécessairement faire du dynamique, trouver des éléments répondant aux critères de recherche et les lister.

Avec un site dynamique, il est possible d’indexer directement les contenus présents dans le dépôt de contenus, en général une base de données. Certains CMS intègrent même directement cette fonctionnalité, plus ou moins clef en main.

Algolia est un moteur de recherche en mode SaaS intégralement pilotable par une API REST extrêmement riche. C’est le choix que j’ai fait pour proposer un moteur de recherche sur ce site.

Mais…

Publier un nouveau contenu est devenu plus compliqué, puisqu’il faut produire le Markdown et les éventuelles illustrations, puis lancer la compilation par Jekyll, avant de déployer.

Tout cela pourrait être facilité avec les Github Pages, mais c’est trop restrictif fonctionnellement.

Je pourrais aussi utiliser une solution d’intégration continue, comme Boris, mais j’ai encore quelques soucis de génération du site qui m’en empêchent pour l’instant.

Mais avoir une source de contenus propre, dans un format plus standard, et versionnée dans Github, est un gain considérable.

  1. Difficile donc d’incriminer une quelconque application serveur en cas de lenteur… ;-) ⬆︎

  2. En fait plutôt du Kramdown, une variante plus sympa de Markdown, permettant notamment cette note de bas de page. ⬆︎

  3. SPIP est un excellent outil libre français de gestion de contenu, particulièrement pertinent pour les contenus éditoriaux. ⬆︎

  4. Ce plugin peut aussi générer les archives de catégories et tags, mais je n’utilise pas les premières, et les secondes sont déjà générées par le plugin dédié. ⬆︎

  5. Notamment grâce à un service tiers, webmention.io, en attendant une éventuelle implémentation auto-hébergée. ⬆︎