Mail Slack Twitter Feed Flickr Github LinkedIn Mastodon Information git Clock Français English Aller directement au contenu principal
read in english

À propos de ce site

Je suis le principal auteur et l’unique responsable des contenus publiés sur ce site. En revanche, les marques citées sur ce site sont propriétaires des sociétés qui les ont déposés. L’ensemble de ce site est soumis au droit français.

Les points de vue et opinions exprimés sur ce blog n’engagent que moi, et en aucun cas mes employeurs ou clients, mon hébergeur ou toute autre personne physique ou morale.

Si vous souhaitez copier, modifier ou redistribuer certains contenus, vous devez respecter les termes de la licence creative commons CC-BY.

Sous le capot

Spécialisé en Web Performance depuis quelques années, j’ai décidé un jour de ne pas être le cordonnier mal chaussé. Depuis, dans une saine compétition avec mon ex-collègue Nicolas Hoizey, je n’ai jamais cessé d’améliorer les performances web du site.lancés sur ce site »).

Côté serveur

J’ai commencé par jeter mon blog Wordpress pour le remplacer par un générateur de site statique1 en node, Hexo. Après avoir déterminé les limites de l’outil et contribué à quelques plugins, j’ai décidé de migrer vers Jekyll dont la communauté me semblait plus mûre.

Mes dépendances Ruby sont gérées par Bundler :

  • pour la gestion des archives : jekyll-archives ;
  • pour la génération d’images responsive : jekyll-cloudinary ;
  • pour le sitemap.xml : jekyll-sitemap ;
  • pour la pagination : jekyll-paginate-v2 ;
  • pour la micro-typographie française : jekyll-microtypo.

J’en oublie sûrement mais vous pourrez trouver l’ensemble des dépendances sur le dépôt Github.

L’internationalisation est permise par i18n et le i18n_filter2.

J’utilise node pour la compilation des ressources statiques CSS et JS.

Compilation et déploiement

Mes pages et articles sont écrits au format CommonMark, une syntaxe légère idéale pour rédiger3. J’utilise les hooks de GitHub pour interfacer ce dépôt à Netlify qui se charge d’exécuter des tests avec rspec pour vérifier que le contenu des en-têtes Front-Matter sont valides en YAML. Si c’est le cas, alors Netlify compile le site.

Le site généré est alors testé via html-proofer pour vérifier que les pages ne contiennent pas d’erreurs.

Si tout se passe bien alors Netlify déploie le site généré sur son CDN.

Le dernier déploiement a été réalisé le vendredi 7 décembre 2018.

C’est également Netlify qui s’occupe de capturer les commentaires pour me les envoyer par mail via Netlify Forms.

Côté Client

Une partie de mon code CSS et JS est dédiée à l’accessibilité et j’essaie également de contribuer de manière responsable, pour être le plus inclusif possible à la fois envers les personnes, mais aussi envers les contextes (par exemple, j’utilise la librairie abbr-touch pour permettre aux personnes en situation de mobilité de visualiser la définition d’une abréviation ou d’un acronyme.

La recherche instantanée est le fruit du branchement du site sur Algolia, une solution très performante d’indexation et de recherche côté client qui a le mérite de proposer un exemple d’implémentation pour Jekyll qui cadrait parfaitement avec mon besoin.

Afin de contrôler ce qui se passe sur mon site (notamment pour détecter des tentatives d’injections), j’ai positionné un certain nombre de règles Content Security Policy et des rapports sont enregistrés dans https://report-uri.com/4.

Une surveillance quotidienne via Dareboost sur plusieurs types de pages m’informe des éventuelles régressions de performance par le biais d’alertes configurées.

  1. Frank Taillandier a merveilleusement bien croqué la mouvance statique sur son blog.

  2. La technique de localisation est détaillée dans le guide de démarrage Jekyll de Thomas Brelet.

  3. Lire à ce propos cet excellent article de Romy sur les syntaxes légères

  4. Merci à Nicolas Hoffman de m’avoir sensibilisé à cette problématique durant sa présentation à Paris Web 2015.