Le Comptoir Sécu

Parlons cybersécurité...autour d'un verre!

Bienvenue sur le nouveau site du Comptoir Sécu!

Au menu: JAMStack avec Hugo, Netlify, Foundation, etc.

Nous vous l’avons “teasé” depuis des semaines, pour ne pas dire des mois, enfin, le voilà : la nouvelle version de notre site internet!

Cela faisait quelque temps que nous souhaitions nous séparer de cette passoire qu’est WordPress (et son cortège de plugins plus ou moins maintenus), les gros problèmes de performances dus à des plugins trop gourmands sur un serveur trop fébrile nous ont enfin poussés à nous lancer.

Ce nouveau site est entièrement statique…bon..ok…sauf les commentaires.

Pour les curieux sur les détails techniques, voici un aperçu :

Pour le moment nous n’avons pas trouvé de meilleure alternative au système de commentaires wordpress que le moteur open source ISSO. Il tourne sur une instance ec2 “Micro” ce qui devrait nous permettre de rester sur le plan gratuit d’AWS. Nous ne voulions pas de Disqus, qui dans son plan gratuit impose l’affichage de publicité, en plus d’être bourré de trackers, ce qui alourdit considérablement les pages web qui l’utilisent. J’ai bien vu 2-3 autres moteurs intrigants, comme celui se reposant sur AWS Lambda, mais cela me semble pour le moment un peu trop artisanal. Les systèmes “statiques” utilisant les GitHub comments ou les pull requests semblent bien trop contraignants en l’état.

Nous avons également changé de lecteur audio pour passer à celui de Podigee, qui a le bon goût de proposer automatiquement un lien de téléchargement direct, ainsi que de supporter le chapitrage.

Au niveau de la génération du site, nous utilisons Hugo, qui ne fait que monter en popularité et finira, je pense, par décrocher le monopole de Jekyll à un moment ou un autre. Cela ne serait-ce que pour la rapidité de génération des pages et ses capacités de génération avec les “custom formats”.

Au niveau de l’apparence visuelle, c’est grosso modo du fait maison en s’appuyant sur le framework CSS Foundation.

Pour l’optimisation du CSS, javascript et HTML, la génération et compression des vignettes, et j’en passe, nous nous servons de Gulp.

Pour ce qui est de l’hébergement, c’est une combinaison entre GitHub qui héberge notre code source et Netlify qui, en réaction à chaque commit, le récupère, le compile et le déploie.

Seule ombre au tableau, nous utilisons désormais Google Analytics pour avoir un aperçu sur les statistiques du site. Nous passerons si possible sur un système self-hosted à l’avenir, du genre de Piwik. Pour le moment, nous nous contenterons de donner notre âme à Google.

Avec tout ça, on est passé d’un temps de chargement moyen des pages de plusieurs secondes à environ 800ms. On espère que vous apprécierez ce gain en réactivité.

Nous avons profité de ce changement d’architecture pour revoir l’organisation et l’allure du site.

Vous retrouverez désormais sur la page d’accueil une mise en avant de nos contenus récents au format podcast, live ou vidéo.

Contenus récents

La dernière annonce importante, comme ce billet, est ensuite affichée.

Annonces

Vous retrouvez enfin nos derniers contenus par catégorie:

  • Les derniers épisodes du comptoir, incluant les hors-séries comme nos couvertures des conférences sécu;
  • Les SECHebdo, revue d’actualité hebdomadaire (ou presque);
  • Les vidéos, que ce soit les SECompris, SEClairs, PoC, ou peut-être des Points Sécu et autres nouveaux formats.

Vous pouvez accéder aux archives de chacun de ces contenus assez facilement via le menu en haut du site, qui inclue également un accès à nos (vieux) articles, mais aussi à une toute nouvelle rubrique: le registre!

Eh oui, vous en rêviez (ou pas), on l’a fait! Désormais, chaque nouveau billet annonçant un SECHebdo, un épisode du Comptoir ou une vidéo inclura dans ses métadonnées

authors

invités

drinks

musiques

Cela nous a pris un temps considérable, mais nous avons pris le soin de mettre à jour tous nos anciens contenus pour qu’ils affichent ces métadonnées.

Nous avons également profité du changement de notre lecteur audio pour implémenter le chapitrage de nos épisodes lorsque celui-ci était disponible dans l’article.

chapitres

Nous avons d’autres surprises sous le coude, certaines déjà mises en place comme l’affichage du site lors d’un live. D’autres encore en préparation comme le support du format AMP pour charger les pages encore plus vite sur mobile.

Un autre avantage indéniable de cette nouvelle architecture, c’est la capacité que vous avez à contribuer! En effet, le code source étant maintenant disponible publiquement sur GitHub, n’importe qui peut nous proposer des pull requests.

Vous vous sentez de réaliser le chapitrage des anciens épisodes? Nous avons fait une coquille dans un article ou les métadonnées? Vous avez trouvé un moyen facile d’implémenter la pagination dans les registres? Faites nous une pull request et participer à l’amélioration du comptoir!