I Rebuilt My Entire Website in Astro… Was It Worth It
Chris Titus explique sa migration de son site Hugo vers Astro, motivée par des besoins avancés de fonctionnalités, et partage les défis techniques, les gains en performance et les compromis financiers de cette transition.
SYNTHÈSE STRUCTURÉE
Le contexte : 20 ans d’évolution d’un site
Chris Titus revient sur l’histoire de ChrisTitus.com, passé d’un serveur exposé dans un placard dans les années 2000 à WordPress, puis à Hugo avec Cloudflare Pages. Il souligne que Hugo a été un excellent choix pendant 5-6 ans, mais que ses besoins ont évolué : « Hugo’s kind of bursting at the seam. » Il précise qu’il adore toujours Hugo, mais qu’il a dû le « Frankensteiner » pour ajouter des fonctionnalités non prévues, ce qui a motivé le passage à Astro.
Le choix d’Astro : une question de fonctionnalités
Astro est un framework moderne de génération de sites statiques (SSG) qui permet d’injecter du JavaScript côté client uniquement quand nécessaire (îles). Chris Titus explique qu’il avait besoin de fonctionnalités comme des formulaires intégrés, une meilleure gestion des téléchargements et une intégration plus poussée avec Discord. Il précise : « I really really love Hugo, but when you’re starting to use it more like a creator hub, Hugo just doesn’t fit the bill. » Astro lui permet de conserver la philosophie statique tout en offrant plus de flexibilité.
La migration en un seul PR : un défi technique
La conversion a été réalisée en un seul pull request (PR) de plus de 2 000 fichiers générés, 813 pages et de nombreux alias pour préserver les URLs existantes. Chris Titus souligne que cela a fonctionné du premier coup : « believe it or not, it worked on the cutover. » Il insiste sur l’importance de la planification et de la gestion des redirections pour éviter de casser le référencement.
Le « review loop » : l’IA comme outil de critique de code
Chris Titus a utilisé un processus appelé « review loop », où plusieurs agents IA se critiquent mutuellement le code pour l’améliorer. Il a consommé 100 % de son plan à 100 $ en une semaine, ce qui montre que cette méthode n’est pas économique pour tout le monde. Il précise : « It’s definitely not a cost-effective solution for many people, especially if you’re using API rates. » Malgré cela, il a obtenu un code fonctionnel et propre, même s’il a dû corriger certains choix esthétiques par défaut des IA, comme les coins arrondis.
Le design : un compromis assumé
Chris Titus admet ne pas être un designer front-end, mais il a nettoyé le CSS en passant d’une multitude de partials à un seul fichier maître. Il a corrigé les espacements excessifs générés par l’IA et préfère un style épuré avec des angles droits. Il évoque la possibilité de faire appel à un développeur pour peaufiner l’esthétique, mais souligne que la structure actuelle est déjà plus facile à maintenir et à étendre.
Performance et Lighthouse : des scores excellents
Les scores Lighthouse sont restés à des centaines (probablement 100) depuis un an, même avec Hugo. Chris Titus note quelques erreurs console liées à Cloudflare Analytics, mais il ne s’en préoccupe pas : « I don’t really care about tracking users though. » Il ajoute que la migration n’a pas dégradé les performances, mais qu’elle a introduit des dépendances supplémentaires (Node.js, npm) qui nécessitent une surveillance accrue.
CI/CD : intégration de la qualité et de la sécurité
Avec Astro, Chris Titus a ajouté des workflows CI dans son dépôt GitHub, notamment pour surveiller les scores Lighthouse et exécuter CodeQL, un outil d’analyse statique de sécurité. Il explique que Hugo, étant purement statique, n’avait pas besoin de ces vérifications, mais qu’Astro, avec ses packages npm, expose à des vulnérabilités potentielles. Il recommande vivement d’ajouter ces contrôles à tout projet web, même statique.
Les compromis financiers : AdSense et AdBlock
Chris Titus révèle que son site reçoit environ 1,5 million de visites par mois, mais que les revenus AdSense ont chuté de 20 à 30 % après la migration. Cela est dû au chargement différé des publicités par Astro, qui attend une requête avant d’afficher l’annonce. Il précise : « You’re probably going to get a little less in ad revenue. » Il mentionne aussi que 352 000 visites sont comptabilisées après filtrage AdBlock, et il encourage les utilisateurs à désactiver leur bloqueur s’ils veulent le soutenir, sans pour autant le recommander.
Le futur : des scripts pour simplifier la publication
Chris Titus prévoit d’ajouter des scripts bash pour recréer l’expérience « Hugo new post » avec Astro, afin de simplifier la création de nouveaux articles. Il souhaite que la commande soit aussi simple que « new post » suivie du titre, ce qui rendrait le processus encore plus fluide qu’avec Hugo. Il reste ouvert à de nouvelles expérimentations, mais il est clair qu’il ne refera pas une migration de sitôt : « Absolutely not. »
CONCEPTS CLÉS
- Astro : Framework SSG moderne qui génère du HTML statique et injecte du JavaScript uniquement pour les composants interactifs (îles). Il est conçu pour les sites de contenu et les portfolios.
- Hugo : Générateur de sites statiques écrit en Go, réputé pour sa rapidité et sa simplicité. Idéal pour les blogs et les sites simples.
- Review loop : Processus itératif où des agents IA critiquent et améliorent le code en boucle, souvent utilisé pour affiner un PR avant fusion.
- CodeQL : Outil d’analyse statique de sécurité de GitHub, qui détecte les vulnérabilités dans le code source.
- Lighthouse : Outil open-source de Google qui audite la performance, l’accessibilité et les bonnes pratiques d’une page web.
- Cloudflare Pages : Plateforme d’hébergement statique avec CDN intégré, offrant des déploiements rapides et une gestion de domaine.
- AdSense : Programme de publicité de Google qui permet aux éditeurs de monétiser leur contenu via des annonces ciblées.
CONCLUSION
La migration de Hugo vers Astro illustre parfaitement l’évolution d’un site web qui dépasse les limites de son outil initial. Chris Titus démontre que ce type de transition est techniquement exigeant, mais qu’il peut apporter des gains en flexibilité et en maintenabilité. Cependant, il met en garde contre les coûts cachés, notamment la baisse des revenus publicitaires et la complexité accrue de la stack. Le message clé est que le choix d’un framework doit être guidé par les besoins réels, et non par la mode : « If you don’t need the things I’ve talked about, and you’re just doing a blog with a picture and some text, Hugo’s what you want. » Cette vidéo est une leçon de pragmatisme pour tout développeur confronté à la refonte de son site.