Héberger un site statique avec Github et Netlify ou la puissance de la JAMStack

Depuis très longtemps le web fonctionne sur le stack Client (HTML/CSS) Server (PHP, Python, node.js,...) et Base de données (MySQL, JSON, ...) qu'on définissait comme le FullStack, ce n'est que depuis peu de temps que la JAMStack est venu bousculer tout ça.

Mais qu'est ce que la JAMStack?

J pour Javascript, A pour API et M pour Markup ce trio gagnant représente pour beaucoup l'avenir du web.

Comme expliqué sur jamstack.org

C'est une nouvelle manière de créer des applications et des sites qui offrent de meilleures performances, plus de sécurité, un coût moins élevé de scaling et une meilleure expérience de développement.

Concrètement on utilise un générateur de site statiques (dans mon cas GatsbyJS mais ça peut marcher pour n'importe lequel, même un site "fait-main") pour lancer un build sur Netlify qui est relié à un dossier GitHub. On fait par conséquent abstraction de la logique serveur et on laisse Netlify servir les fichier compilés.

Ce qui est génial c'est qu'étant lié à GitHub, Netlify devient un environnement de développement continu et se recompile à chaque push git. Enfin la cerise sur le gâteau c'est que Netlify offre un hosting gratuit!

Je vais expliquer ci-dessous uniquement la mise en ligne du site. Les seuls pré-requis sont une connaissance basique de git et un compte GitHub, évidemment il faut avoir quelque chose à mettre en ligne ;).

1. Pour commencer on crée un compte Netlify.

2. On crée une team sur Netlify, dans le coin droit on clique sur "New site from Git".

3. Ceci démarre le wizard netlify, dans notre cas on choisit évidemment GitHub une modal apparaît et nous demande de nous connecter à GitHub

4. Pour voir apparaître le repo github il faut d'abord permettre à Netlify d'y accéder en suivant le lien ci-dessous

5. On entre la commande de compilation dans mon cas gatsby develop et on appuye sur "deploy site". La magie opère et après quelques minutes grand max votre site est en ligne!

Netlify et GatsbyJS font des merveilles ensemble, on y ajoute un CMS tel que contentful ou prismic et les possibilités sont réellement incroyables.