Refonte de mon portfolio en utilisant Gatsby đŸ€˜

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

Ressources

--

--

Passionate about tech. I like to code and experiment.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store