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 Headless CMS par exemple.

screenshot-plugin-gatsby.pngThĂšmes de Gatsby

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 ! 👋

Ressources