DanLevy.net

Leçons tirées de la mise à jour de mon blog

Astro, Tailwind, MDX, Pagefind et plus !

Récemment, j’ai entrepris de mettre à jour mon site Gatsby v1 vieux de plus de 8 ans.

Cet article de blog partagera quelques leçons tirées de ce processus ainsi que les technologies amusantes que j’ai explorées.

Table des matières

Exigences du projet

Avant de me lancer dans la mise à niveau, j’ai défini un jeu d’exigences :

Comme mon blog reçoit un nombre de visites quotidien très variable, je pensais qu’un site pré‑généré statiquement offrirait les performances souhaitées sans complexité supplémentaire.

J’avais également besoin de conserver le contenu et les fonctionnalités existants du site, notamment :

Choix de la pile technologique adaptée

Au fil des années, j’ai travaillé avec de nombreux outils de sites statiques, de Jekyll, Hugo, Slate à Gatsby, ainsi qu’avec divers frameworks front‑end : Ember, Knockout, Angular, Vue et bien sûr React.

Du coup, j’avais littéralement trop d’options, que j’ai finalement réduites à Remix, Next.js et Astro.

Je pourrais écrire une série complète d’articles sur mon processus d’évaluation, mais je le résume ici :

J’ai choisi Astro parce que je pouvais rapidement faire des choses concrètes.

Son API est rafraîchissante de simplicité. C’est un excellent compromis entre flexibilité et bonnes opinions de conception.

Il était rassurant de constater qu’Astro ne montre aucune préférence évidente pour le cloud ni d’agenda de framework.

Astro n’était pas la seule technologie utilisée ; voici le récapitulatif complet de la pile :

Astro : Courbe d’apprentissage et fonctionnalités clés

Astro est rapidement devenu la pierre angulaire de ma mise à niveau.

Voici quelques fonctionnalités que j’ai trouvées particulièrement utiles :

Certaines choses ont été légèrement surprenantes, comme le style autour du balisage injecté par Astro et l’effet de display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

Comparaison entre les composants .astro et les composants client

Les composants Astro sont essentiellement des modèles HTML avec un puissant système de composants et de props. Ils peuvent récupérer des données au moment de la construction, accéder aux ressources backend, et garder certaines informations sensibles cachées.

Le meilleur moyen de comprendre les composants .astro d’Astro est de les comparer aux composants côté client (React, Vue, Svelte, etc.).

Que devez‑vous faire ?Composant .astroComposant client
Générer du HTML avec un modèle+composant puissant✅❌
Récupérer des données au moment de la construction✅❌
Accéder aux ressources backend (directement)✅❌
Garder les informations sensibles cachées (tokens d’accès, clés API, etc.)✅❌
Réduire le JavaScript côté client✅❌
Utiliser des composants client (React, Vue, Svelte, etc.)✅✅
Ajouter de l’interactivité et des écouteurs d’événements (onClick(), onChange(), etc.)❌✅
Utiliser l’état et les effets de cycle de vie (useState(), useReducer(), useEffect(), etc.)❌✅
Utiliser des API réservées au navigateur❌✅
Utiliser des hooks personnalisés dépendant de l’état, des effets ou d’API navigateur❌✅

CSS moderne : Wow

En revenant au développement front‑end, j’ai été impressionné par les avancées du CSS natif :

Recherche : Pagefind

Mettre en place une recherche sur le site sans services tiers ni hébergement de base de données semblait être un défi amusant. Après tout, ce n’est pas comme si j’avais déjà 10 000 articles à indexer (pour l’instant).

En parcourant les intégrations communautaires d’Astro je suis tombé sur un outil fantastique que j’aurais aimé connaître plus tôt : Pagefind.

Peu d’outils résolvent un problème aussi bien que Pagefind résout la recherche locale sur un site.

La simplicité d’implémentation de Pagefind est un vrai plaisir. Il peut s’intégrer à n’importe quel contenu de site statique, et vous pouvez choisir d’utiliser l’interface par défaut ou de créer une UI entièrement personnalisée si vous le souhaitez.

Il a résolu proprement tout ce que je recherchais. L’intégration n’a pris que quelques minutes, et le principal travail consistait à ajouter une balise <div id="search"></div> ainsi qu’un peu de style !

Comments : Utterances

Malheureusement, j’ai dû dire adieu à Disqus et aux commentaires que j’avais accumulés pendant des années.

Je voulais un meilleur contrôle et une meilleure visibilité sur les scripts tiers de mon site.

De plus, il fallait que ce soit simple et maintenable.

Cela m’a conduit à choisir le service fantastique Utterances. Son système de commentaires basé sur les issues GitHub correspond bien à mon audience. En plus, il est facile à configurer et gratuit.

Tailwind : Regrets

Il n’y a qu’un seul élément technologique que je commence à regretter d’utiliser : Tailwind.

Avec le temps, je ressens la différence de coût entre l’écriture et la maintenance. Tailwind permet d’écrire très rapidement, mais dès qu’il devient suffisamment complexe, il peut devenir fastidieux à lire et à étendre.

Conclusion

Mettre à jour mon ancien site Gatsby v1 vers une pile moderne centrée sur Astro a été une expérience agréable. 10 / 10, je le recommande.

Si vous envisagez de moderniser un site existant ou de créer un nouveau site statique (ou hybride), je recommande vivement d’examiner Astro. La courbe d’apprentissage peut être raide par moments, mais les bénéfices en termes de performance, d’expérience développeur et de pérennité du projet valent largement l’effort.

Loading comments...