Refonte de mon portfolio avec Gatsby

D'abord basé sur le générateur de site statique Jekyll, mon portfolio avait besoin d'un petit coup de boost et d'intégrer des nouvelles bonnes pratiques

3 minutes

La première version de ce portfolio était basée sur le générateur de site statique Jekyll développé par une équipe chez Github. Bien que l'éxperience de développement avec celui-ci était satisfaisante, le temps nécessaire pour compiler le site (ma méthode est détaillée ici) était beaucoup trop important et la dépendance de Ruby pour un projet basé quasi entièrement sur la présentation et le front-end n'était pas nécessairement voulue. C'est en recherchant d'autres alternatives que j'ai découvert Gatsby.

Qu'est ce que Gatsby ?

Gatsby est un framework basé sur React permattant de créer des sites statiques performants et modernes en permettant d'utiliser des sources de contenu variés comme une API provenant d'un CMS, des fichiers Markdown, du JSON et beaucoup d'autres. Toutes ces sources sont ensuite récupérables via GraphQL afin d'être injectées où l'on souhaite sur le site. La configuration de Gatsby est gérée par Webpack ce qui nous donne accès à tout l'écosystème Javascript moderne avec ES6 et plus encore. Ceci assure une éxpérience de développement familière et efficace si on a déjà travaillé sur une application React par exemple et l'accès à beaucoup de librairies et d'outils à travers NPM. Un bon nombre de plugins viennent étoffer les fonctionnalités de Gatsby ce qui en fait un outil vraiment complet et en constante évolution. Un outil en ligne de commande (CLI) permet également de rapidement lancer le serveur de développement de Gatsby, de compiler les fichiers pour créer une version prête pour la production ou encore de lancer un nouveau projet.

Lancement du serveur de développement Gatsby en ligne de commande
Lancement du serveur de développement Gatsby en ligne de commande

La vitesse sans efforts

Pour les applications interactives qui effectuent beaucoup de manipulations du DOM, l'ajout de React grâce à Gatsby améliore déjà beaucoup les performances cependant ce n'est pas uniquement l'ajout de cette librairie qui va augmenter la vitesse de votre site.

En effet Gatsby inclut également un outil de génération d'images qui va automatiquement générer des images responsive optimisées en poids via les requêtes GraphQL. Cet outil va même pouvoir convertir vos images en WebP, format de plus en plus supporté par les navigateurs modernes. Vous souhaitez construire un site qui adhère aux principes des Progressive Web Apps (PWA) ? Gatsby inclut un manifest.json et une gestion de l'offline avec les service workers sans configuration particulière.

Niveau performance toujours, les pages sont préchargées afin de garantir une éxperience de navigation fluide et les fichiers javascript et css sont décomposés par page afin de ne charger que le strict minimum nécéssaire à la bonne éxecution de la page en cours ce qui améliore grandement les résultats d'outils de mesure de performance.

Tous ces concepts assez récents sont aiséments implémentés avec l'aide de Gatsby pour concevoir des sites modernes et à la pointe.

Migrer vers Gatbsy

Entamer une refonte d'un site existant en utilisant Gatsby a été une expérience très satisfaisante pour moi. Du fait de l'architecture de Jekyll tout mon contenu se trouvait dans des fichiers Markdown que je n'ai quasiment pas eu à modifier. Il est également rassurant de savoir que je peux changer mes méthodes d'édition de contenu (WordPress, Netlify, API personnelle ou autre) et que mon site s'adaptera à ce choix sans changements importants à réaliser.

Les scores d'audit de mon sites se sont considérablement améliorés grâce à toutes les bonnes pratiques qu'intègre Gatsby ce qui aide aussi au niveau du référencement et du confort d'utilisation.

L'architecture du projet change également assez peu puisque Gatsby garde les notions de templates et de layout en plus d'être assez souple au niveau de l'organisation des dossiers.

Au final l'étape la plus longue de ce changement de technologies aura été l'adaptation du code Javascript ES5 à React. Tout ce qui est spécifique à Gatsby a été très rapide à mettre en place.