Menu
Mais qui est ce Hugo dont je vais vous parler ? Notre dernier stagiaire ?
Et bien non, raté !
Hugo est un CMS écrit en Go, d’où son nom d’ailleurs, qui plutôt qu’un CMS est un générateur de site statique, HTML donc, à l’ancienne, presque. Car si le résultat d’un site créé avec Hugo est bel et bien un site HTML tel qu’on les faisait en 1999 (les gifs en moins), Hugo pour arriver à ce résultat met à votre disposition pléthore d’outils et de fonctions qui vont rendre la création de sites plus rapide et plus moderne.
Et comme chez Mu on avait envie de voir ce qu’on pouvait tirer d’une telle solution et jusqu’où on pouvait aller dans l’éco-conception, on a pris quelques jours pour refondre un site vitrine. Et comme on est jamais aussi bien servi que par soit-même, c’est le site personnel de Guillaume (l’humain derrière la société Mu) qui a servi de test.
Hugo va vous permettre par exemple si vous avez plusieurs pages qui utilisent le même design de séparer la « vue » dans un fichier HTML, du contenu (en markdown) et donc de n’intégrer qu’une unique fois votre page.
Mais ce n’est pas tout bien sûr, Hugo peut redimensionner et compresser vos images à la volée, faire des boucles, des conditions, etc. Bref tout ce que vous attendez d’un moteur de template moderne, tout comme le ferai Twig ou blade.
A la sortie donc un site HTML natif, qui obtient sans effort 100/100 à Lighthouse ; et quand on sait l’importance de ce genre de petites choses dans le référencement aujourd’hui c’est déjà un argument en soit ! Sans compter le fait que vos visiteurs ne seront pas tentés de quitter votre site trop lent à charger.
Vous vous apprêtez à générer un site statique, rapide par essence, il faut donc pousser la logique jusqu’au bout… Qu’est ce qui ralentit vos sites web habituellement (en dehors de wordpress) ? Ce sont toutes les dépendances qu’on a pris l’habitude d’utiliser par commodité mais qui au fil des ans se sont alourdies ; pour ne citer que les plus connues : jquery, bootstrap…
On va donc aussi s’en débarrasser ici. Mais on veut quand même être efficace, avoir un CSS moderne (avec flexbox, grid, responsive etc), compiler nos assets (javascripts, css) et garder un peu d’animation, et d’éléments dynamiques sur le site (menu responsive, lightbox etc).
Pour le design, c’est l’occasion de tester TailwindCss.
Un framework CSS concurrent plus ou moins direct de Bootstrap, qui a l’avantage de permettre un développement rapide tout en étant très configurable et personnalisable. Il est aussi beaucoup plus léger 30Ko contre 300Ko pour son ainé. Et on diminuera encore de beaucoup ce poids plus tard.
L’argument retenu ici est vraiment le poids et la facilité à personnaliser un site Tailwind.
Pour le javascript, il y a un peu plus de débat. Avec l’évolution de javascript au cours des dernières années, on s’accorde à dire que jQuery est globalement devenu dispensable. D’ailleurs de plus en plus de librairies sortent en étant indépendantes de tout framework, quand elles s’appuyaient toutes sur jQuery il y a quelques temps encore.
Pour nous la solution la plus légère serait donc de tout faire en Js natif. Mais on avoue trouver cela encore très rébarbatif et comme pour le choix de Tailwind il y a une volonté d’efficacité. Le site s’appuiera donc sur AlpineJs un framework Javascript, souvent adossé d’ailleurs à TailwindCss, très léger qui permet de diminuer fortement le javascript produit et cela seulement pour une librairie de 6Ko !
On s’en servira ici pour faire le burger menu sur mobile, et faire une lightbox pour les photos.
Pour marier le tout, minifier les css et js, préfixer le css et surtout purger celui-ci de toutes les classes inutiles, on utilisera PostCss. A la sortie on se retrouve donc avec :
Franchement c’est propre.
C’est là que le terme éco-conception apparait.
L’éco-conception dans le web c’est l’idée de faire que l’empreinte écologique d’un site web soit la plus réduite possible. Et pour ça que fait-on ? On réduit ce dont il a besoin pour fonctionner, à savoir :
On a plutôt bien travaillé jusqu’ici, le site est léger en poids (quelques dizaines de Ko), et comme c’est du HTML pas de traitement par le serveur avant envoi (au contraire du php où autre langage serveur).
Questions bande passante et espace disque, le plus consommateur seront les photos, mais là aussi on va dans le bon sens. Hugo compresse les images à la volée pour réduire leur taille, les dimensionne selon notre besoin et enfin les converti en webp, format le plus léger pour le web à ce jour. On ajoute à cela un chargement en lazy-loading (via html5 et non une lib js) afin de n’envoyer au client que ce qu’il va réellement visualiser et on est pas mal.
Dernier élément les polices du site, ici on utilise des polices Woff2 variables, chargées en local et surtout pas depuis un domaine tiers comme Google Fonts… et voilà ! Poids total de la page avec une grande photo en background : 180ko. Dont 100ko pour l’image et 45 pour les fonts: léger !
Bon on a refait le site, mais on souhaiterait quand même savoir s’il reçoit des visites.
Si on met Google Analytics en place, on devra lui adjoindre une librairie de gestion des cookies pour être conforme avec le RGPD. On va donc chercher une solution alternative, et lui poser quelques contraintes :
Et la solution existe (sinon on en parlerait pas), elle s’appelle Plausible, est allemande et c’est une petite boite auto-financée (et rentable !) qui propose sa solution d’analytics soit en open-source auto-hébergée soit dans le cloud, avec des serveurs en Allemagne pour un tarif relativement modique. C’est donc parfait pour nous !
Leur script fait 1ko, génère quelques stats de base (nombre de visites, origine des visiteurs, pages vues…). C’est largement suffisant et ça reste très léger. Vos visiteurs vous disent merci, leurs données ne fuitent pas aux Etats-unis et ils n’ont pas à cliquer sur des popups agaçants. Tout le monde y gagne.
Ce premier site réalisé avec Hugo, en quelques jours seulement, s’avère très convainquant, le chargement est instantané, le design moderne, minimaliste et fluide… et quel plaisir de voir disparaitre ce fichu popup de cookies !
Après, il faut être honnête on perd bien entendu le back-office que propose WordPress et cette solution ne peut donc pas être une alternative complète au fameux CMS.
Mais finalement si votre client vous demande toujours de modifier le contenu et ne souhaite pas le faire lui même ; la vitesse de chargement, l’absence de bandeaux cookies, l’insensibilité aux attaques (pas de code serveur exécuté) deviennent de très bons arguments commerciaux.
Il faut juste savoir quand cette solution est la plus adaptée.
Surtout qu’on en a pas parlé ici, mais Hugo est prévu pour les blogs, avec des articles écrits en markdown et il y a mêmes des éditeurs en ligne, aussi beaux qu’un WordPress, capables de gérer le contenu du site grâce à Git.
Côté hébergement pareil c’est très simple, un simple petit FTP peut suffire, ou Github Pages ou des solutions comme Netlify… Vous avez le choix.
De notre côté, nous avons déjà convaincu un client qui souhaitait quelque chose de très fluide sur mobile, l’argument de la vitesse de chargement à fait mouche.
Prochaine étape, refaire ce site (celui que vous êtes en train de lire) actuellement sous WordPress et le passer sous Hugo… Et pourquoi pas d’ici là,proposer à d’autres clients intrigués par cette démarche de mettre en place cette solution pour eux.
Si c’est votre cas, n’hésitez pas ! Contactez-nous.
Une dernière chose, comme tout ce qu’on utilise ici est libre, on s’est dit qu’un juste retour des choses serait de rendre notre template Hugo libre également ! Vous pouvez donc le trouver sur Github : sous le nom de mugoPhotos, template Hugo pour photographes.
Mu est une agence web spécialisée en gestion de projet, référencement et services SaaS, créé par Guillaume Le Roy et implantée à Rennes.