Refonte de mon portfolio en utilisant Gatsby 🤘

4 min readAug 5, 2020

Bonjour à tous ! 👋

Je vais vous parler aujourd’hui de mon retour d’expérience sur la refonte de mon site perso avec la JAMstack en utilisant Gatsby.

Un peu de contexte

Cela fait maintenant plus de 10 ans que j’ai un site perso / blog / portfolio… où j’écris de temps en temps mes humeurs, coups de coeurs tech et tutoriels.

Au fil du temps, ce projet a été utilisé comme un bac à sable pour apprendre de nouvelles compétences. C’est ainsi qu’en 2010 une première version vit le jour avec Wordpress hébergé directement chez moi 🤘 C’était roots, mais ça m’a permis de voir comment fonctionnait PHP, MySQL, Apache2… bref tout ce qu’il faut pour héberger une application web. ( J’ai par la suite loué un serveur mutualisé chez OVH )

Puis vers 2013 changé pour Jekyll, outils, qui m’a permis très rapidement de me familiarisé avec l’environnement Ruby ( et son eco-système, Gem, Bundler ).

2020, il est temps de changer pour une 3ème fois, histoire de surfer sur la hype de la JAMstack ! 🏄‍♂️

Pourquoi Gatsby ?

Pour commencer, j’aime beaucoup React. J’ai un peu hésité avec Create-React-App, étant familiarisé avec cet outils ( chez Picto Acccess, nous utilisons ce boilerplate pour certaines de nos apps ). Ayant entendu de plus en plus parlé de la JAMstack je me suis dit que c’était le paradigme idéal pour remettre un coup de neuf sur mon site perso !

Mon choix de technologie s’est portée sur Gatsby de part sa popularité et des nombreux avantages qu’il propose :

Une forte communauté ( 46k stars sur Github )
Un large choix de plugins /thèmes disponible directement sur le site officiel
Une simplicité de démarrage et prise en main ( surtout si vous connaissez bien React ! )
Performances accrues ( évidemment… puisque c’est un site statique )
Possède pas mal de similarité avec CRA : hot reloading, un environnement de développement très facile à prendre en main et un build script prêt à emploi. 🙌
Le support de GraphQL : un serveur GraphQL tourne en parallèle de votre application, vous permettant de récupérer toutes sortes de données liées à votre projet.
Evolution : avec les différents plugins, je pourrais éventuellement faire évoluer mon site statique en utilisant un HeadlessCMS.

Demonstration

Je vous met ici le lien vers mon nouveau portfolio, je vous laisse vous balader, si vous le désirez. N’hésitez pas à me faire des retours !

Par où commencer ?

La documentation de Gatsby est très bien faites : ici. Vous y retrouverez un tutoriel ainsi qu’un Quick Start.

Si vous désirez démarre rapidement et vous laisser guider, vous pouvez utiliser les starters proposés par Gatsby, ou encore Stackbit qui vous permet, en quelques clics, de générer un site complet.

Déploiement & hébergement 🧙🏼‍♀️

**Gatsby** génère en finalité des fichiers statiques, cela étant vous aurez l’embarras du choix quant à l’hébergement.

Pour ma part, l’ancienne version de mon site perso. était hébergé à l’aide de Github Pages. C’est une solution gratuite mis en place par Github, et depuis que leur offre commerciale à évoluée — il est maintenant possible d’avoir des dépôts privés sur les comptes gratuit — c’est devenue une très bonne solution. Vous trouverez ici la documentation pour héberger votre site statique sur Github Pages.

Pour cette nouvelle version, j’ai choisis d’héberger mon application sur le service Netlify. Netlify propose différent services notamment la génération automatique de certificat SSL ( HTTPS ), un CDN, de l’intégration continue et également ce qu’ils appellent les « notifications », ce qui vous permet d’intégrer des formulaires sur votre site statique ( limité à 100 notifications par mois pour la version gratuite).

Netlify s’occupe également de build & de deployer votre application à partir d’un simple “push” sur votre branche “master”.

Cerise sur le gâteau à la cerise 🍒, l’intégration se fait super facilement : il suffit de cliquer sur le bouton « New site from Git » sur le tableau de bord et de choisir le bon dépôt. Vous pouvez ajouter quelques configurations supplémentaires, si vous le désirez… et c’est tout !

Conclusion

Je vous encourage à tester Gatsby, qui présente pour moi une chemin pleins de promesses quant au futur du développement web, en supprimant un paquet de contraintes liées aux setups, build & déploiements, ce qui permet de nous concentrer sur ce qui nous intéresse vraiment.

Merci d’avoir lu et bon code ! 👋