Retour aux articles

Mon site fait peau neuve

  • react
  • gatsby
  • contentful
  • netlify
2 minuteslundi 25 janvier 2021

Dans cet article, je vais vous parler de la conception de mon nouveau site web.

Ordinateur

Pourquoi une nouvelle version ?

L'ancienne version de mon site web utilisait une stack PHP basée sur le framework Laravel avec une base de données MySQL, le tout hébergé sur un VPS OVH avec un serveur Nginx pour servir tout ça. Une stack assez classique, mais pas forcément élégante à faire évoluer, surtout pour un site perso. C'est pourquoi j'ai fait le choix de partir sur une stack JS, assez simple et élégante.

La nouvelle stack de mon site

Front-end

  • Gatsby (React)

Back-end

  • Contentful (headless CMS)

Deployment

  • Netlify

J'ai découvert Gatsby il y a quelques jours et j'ai rapidement été séduit par la façon dont on peut réaliser des applications SEO friendly en utilisant React. Ce qui est bien avec Gatsby c'est qu'il est très pratique pour des petits sites web où il n'y a pas beaucoup de pages et où la donnée varie très peu. Un petit blog et/ou un portfolio par exemple. Le principe de Gatsby est simple : il fait du SSG (Static Site Generation) afin de générer toutes les pages de votre site lors du build.

Le front-end communique avec l'API de Contentful par le biais de GraphQL. Ces requêtes permettent à mon application de récupérer toutes les données (articles, projets) qui devront être afichées dans les différentes pages de mon site.

Enfin, Netlify me permet d'héberger le tout sur le web. C'est très pratique et cela facilite énormément toute la partie déploiement car Netlify propose un système de déploiement continu : à chaque commit ou à chaque ajout/modification de donnée, mon site est automatiquement mis à jour.

Conlusion

Cette nouvelle version me permettra de gérer le contenu du site très facilement, c'était vraiment l'objectif principal. Si jamais vous êtes intéressé, ci-dessous vous pouvez accéder au code source du site. 😉

A bientôt ! 👋

Lien vers mon repository

Partagez cet article

  • Logo Twitter
  • Logo Facebook
  • Logo LinkedIn
  • Logo Email