Passez à un site internet moderne, ultra rapide et performant avec Gatsby JS ou Next.js.

Gatsby + Contentful + Netlify : le combo parfait pour votre site vitrine en JAMStack

Je vous en ai déjà parlé ici, utiliser la JAMStack avec Gatsby.JS pour votre site web sur mesure c'est vous assurer entre autres :

• d'avoir une site ultra rapide au chargement et à la navigation. Voir cet article par exemple

• d'augmenter votre taux de transformation et diminuer votre taux de rebond

• d'avoir un site hyper sécurisé sans devoir payer de mises à jours de sécurité

• de supporter sans problème des pics d'affluence sur votre site internet

• d'avoir un site plus écolo (si, si !)

Et maintenant qu'on a dit ça, par où commencer pour mettre en place la JAMStack pour votre prochain site internet ?

Il existe aujourd'hui une multitude d'outils pour :

• gérer et administrer vos contenus JAMStack (Contentful, Strapi, Agility CMS, WordPress Headless...)

• développer votre site web avec un générateur de site statique (Gatsby, Nuxt, Hugo, Jekyll...)

• héberger votre site statique (Netlify, Vercel...)

Heureusement, j'ai testé pour vous pas mal de combinaisons, et le combo gagnant, c'est pour moi Contentful + Gatsby + Netlify

Laissez-moi vous expliquer pourquoi :

Contentful pour administrer vos contenus

Contentful est un CMS (Content Management System ou plus simplement Système de gestion de contenu) en ligne. Gros avantage, pas besoin de l'héberger. Et potentiellement gratuit !

Il vient avec son API GraphQL qui permet de récupérer tous les contenus dans Gatsby.

La version gratuite de Contentful permet déjà de faire énormément de choses. Pour un site vitrine classique. Au moment où j'écris cet article, la création d'un compte gratuit autorise :

• 3 espaces de travail

• 5 utilisateurs

• 2 rôles (Administrateur et Editeur)

• 48 types de contenus (c'est énorme, je vous explique plus tard ce que c'est)

• 25000 enregistrements

• 50 megas de stockage d'images

Tout ça gratuitement !

Ce CMS est très simple d'utilisation. Je crée pour vous des types de contenus (pages, articles, réalisations, catégories, témoignages, produits etc...) avec les champs associés (textes, textes enrichis, relations, images, liens etc...). Vous créez ou modifiez les différents champs pour ces types de contenus.

Les contenus sont enregistrés automatiquement. Et je mets en place un bouton pour envoyer les modifications en ligne quand tout est bon.

Note: Comme pour site en JAMStack, il faut prévoir un temps de "construction du site" à chaque mise à jour (1 minute à quelques minutes selon la taille de votre site). Mais Gatsby s'améliore constamment sur ses temps de "Build".

Update 23/03/2021: La dernière version de Gatsby et la dernière version du plugin gatsby-source-contentful sorties début mars 2021 permettent des temps de "Build" encore plus rapides et on obtient des performances record avec le dernier gatsby-plugin-image.

Netlify pour héberger votre site gratuitement

Il existe de nombreuses possibilités d'hébergement statique. Netlify pour moi est l'un des meilleurs. Sa version gratuite est largement suffisante pour la majorité des sites web. A ce jour, au delà de l'hébergement du site, la version gratuite permet tout ça (entre autres)!

• mise à jour automatique de votre site quand votre développeur fait une modification sur son dépôt Git, Bitbucket ou Gitlab

• certificat SSL gratuit (pour votre HTTPS)

• une "preview" du site avant chaque reconstruction

• retour en arrière instantané possible sur toute version

• 100 GB de bande passante par mois

• 300 minutes de "construction de site" par mois (ce qui fait plus de 150 mises à jour en moyenne)

• nombre de sites illimité

Les versions payantes permettent entre autres d'augmenter le nombre de minutes de "construction de site par mois" et le nombre de construction de site simultanées (si plusieurs personnes administrent les contenus en même temps par exemple).

Netlify vous permet également d'envoyer plusieurs versions (branches) de votre site (branche version A, branche version B) pour faire du A/B testing, en envoyant par exemple 50% de votre trafic vers une page avec un design A, et 50% vers la page au design B.

Enfin, Netlify vient avec tout un tas de plugins géniaux pour augmenter les performances de votre site (Mise en cache pour construction du site, optimisation des images, du css etc...).

Gatsby le magnifique générateur de site statique

Alors pour le coup, le choix de la technologie dépendra aussi de votre développeur. Gatsby est le générateur de site statique idéal pour les développeurs React.js (par exemple les développeur Vue.js vont préférer Nuxt.js).

Je ne vais pas rentrer dans le détail pour ne pas perdre les non-développeurs mais Gatsby vient avec une grande quantité de plugins qui permettent de réaliser énormément de choses (par exemple pour gérer votre SEO ou pour optimiser les images), une documentation très riche, et une énorme communauté de développeurs.

Ses performances sont excellentes et l'équipe Gatsby apporte sans arrêt des améliorations et des nouvelles fonctionnalités..

Convaincus d'accord mais comment ça marche ? Dans la partie qui suit, je vous explique comment mettre en place la Stack pour votre projet web.

L'objectif - sans rentrer dans le détail - est juste de vous montrer ce que cela implique pour vous, et ce que vous aurez à gérer (pas grand chose à part administrer vos contenus !).

Mise en place de votre hébergement sur Netlify

Créez votre compte Netlify sur https://www.netlify.com/

Donnez les accès à votre développeur.

Donnez les informations d'hébergement de votre nom de domaine si vous en avez déjà un

Et voilà cette partie est terminée pour vous.

Mise en place de Gatsby

Vous n'avez rien à faire. Votre développeur va lier votre compte Netlify à son dépôt (son code) GitHub, GitLab ou BitBucket. A chaque fois qu'il va modifier son code et le mettre à jour sur son dépôt, le site web sera reconstruit automatiquement sur Netlify et mis à jour.

Mise en place de Contentful

Créez votre compte sur https://www.contentful.com/sign-up/

Donnez les accès à votre développeur.

Il va créer le lien entre Contenful et votre hébergement Netlify pour permettre les mises à jours automatiques ou avec un bouton (option 2 préférable)

Le développeur va ensuite créer des types de contenus (appelés "Content Model") en fonction de votre projet. Par exemple :

• Contenu de type Page

• Contenu de type Article

• Contenu de type Catégorie d'article

• Contenu de type Produit

• Contenu de type Catégorie de produit

• Contenu de type Réalisations

• Contenu de type Témoignages clients

Pour chaque type de contenu, votre développeur crée des champs de contenus.

Par exemple, ici pour le type de contenu "Blog Post" (article de blog), j'ai créé les champs "Titre", "Image", "Date de publication", "Contenu" etc...

Et vous alors ?

Et bien c'est simple vous n'avez qu'on seul onglet qui vous intéresse : l'onglet Content ("Contenus").

Cliquez sur le type de contenu que vous voulez ajouter. Par exemple ici un article (contenu de type "Blog Post" pour ceux qui suivent !)

Puis dans l'ordre :

Vous ajoutez vos contenus, vous publiez votre contenu - qui est en brouillon par défaut (Bouton vert "Publish") et enfin quand tout est bon, quand vous avez publié tous vos contenus, vous lancez la reconstruction du site (bouton bleu "Build website")

Et voilà, après une minute ou deux vos contenus sont en ligne ! Trop fastoche !

Pour finir ...

J'espère que cet article vous a donné envie de vous lancer (pas par la fenêtre hein !?).

Beaucoup d'entreprises et d'agences restent coincées sur des technologies monolithiques comme WordPress et ont peur du changement. Elles se privent pourtant de performances incroyables tout en réduisant leurs coûts d'hébergement et de maintenance.

Et pour vous, le changement c'est maintenant comme disait François ? On essaye ensemble ?

Jérôme Dicharry, Gatsby lover