Gatsby JS, c'est quoi ? Le Guide Ultime

Vous êtes développeur et quand vous avez parlé d’ouvrir un blog, on vous a dit d’utiliser Gatsby ? Vous voulez lancer votre blog avec Gatsby pour les meilleures performances possible ? Vous êtes développeur et voulez quelque chose de mieux que Wordpress pour votre blog ?

Votre blog doit vous ressembler et montrer vos capacités en codes.

Gatsby est un générateur de sites statiques basé sur React et GraphQL. Vous codez vos pages en JSX et écrivez votre contenu en Markdown et Gatsby se charge de générer un seul fichier HTML en Single Page App qui suit les derniers standards de développement JAMStack qui offrent rapidité et sécurité.

Avec Gatsby, vous pouvez tout avoir :

Performances, simplicité et personnalisation.

En plus, en lisant cet article vous découvrirez que vous n’aurez qu’à acheter un nom de domaine, tout le reste est gratuit.

Découvrons sans plus attendre pourquoi Gatsby est la meilleure solution pour ouvrir un blogue mais pas seulement !

Qu’est-ce que GatsbyJS ?

Gatsby.js est un générateur de site moderne super rapide qui vous permet de développer vos pages en React.

À quoi sert Gatsby JS ?

Gatsby est utile pour les blogs ou les sites statics pour les personnes qui cherchent la performance et qui savent coder.

Gatsby JS est-il gratuit ?

Oui Gatsby est gratuit et open-source, vous pouvez même l’héberger gratuitement comme nous le verrons plus tard dans cet article.

Comment fonctionne Gatsby JS ?

Gatsby prend vos fichiers Markdown et génère des pages intelligentes de manière optimisée.

Qui a créé Gatsby JS ?

Kyle Mathews

Dois-je apprendre Gatsby ?

Si vous connaissez React, apprendre Gatsby ne sera pas très compliqué. C’est une bonne corde à avoir à son arc pour beaucoup de genres de sites.

Si vous ne connaissez pas encore React, découvrez mon guide pour apprendre React en 2023.

Gatsby est-il une Single Page App ?

Gatsby construit une page pour chaque fichier markdown au moment de la construction et génère un répertoire qui peut être hébergé directement. Comme Gatsby est un Single Page App (SPA), nous n’avons qu’un seul index.html à la racine et les components sont chargés en fonction de la route empruntée par l’utilisateur.

Qu’est-ce que le thème Gatsby ?

Les thèmes Gatsby sont des plug-ins qui s’installent dans le fichier gatsby-config.js et qui permettent d’avoir des features et une UI spécifiques en fonction du thèmes qu’on choisit.

Qui utilise Gatsby ?

Beaucoup de grandes entreprises utilisent Gatsby pour leurs landing pages et leurs blogs. Comme la liste change souvent, je vous laisse les découvrir sur la plage de showcase de gatsbyjs

Ajouter de la publicité pour monétiser son blog Gatsby

Avec Gatsby vous pouvez aussi utiliser des régies publicitaires comme AdSense. J’ai d’ailleurs écrit une article pour vous expliquer comment ajouter et configurer AdSense sur un site Gatsby JS. Vous y apprendrez comment choisir les bonnes annonces et les intégrer à n’importe quel projet react (comme Gatsby).

Ajouter des commentaires sur Gatsby.js

Comme Gatsby est un site Static, il n’y a pas de solution de base pour que vos lecteurs puissent poster des commentaires.

Heureusement, plusieurs solutions s’offrent à vous pour pouvoir ajouter un système de commentaire a votre blog ou site Gatsby.

Disqus

Disqus est une très bonne solution, car le plan gratuit est très généreux et vous permettra de bien commencer pour votre système de commentaires.

Bien que ses performances ne soient pas terribles, le plugin Gatsby Disqus vient avec du Lazy Loading, ce qui veut dire que le chargement de Disqus n’impactera pas le temps de chargement initial des articles votre site de manière négative.

Commento

Commento est aussi excellent, avec une meilleure UI que Disqus mais est malheureusement payant après les 30 jours d’essais.

Facebook Comments

Avec le package react-facebook, vous pourrez utiliser le système de commentaire Facebook.

Utterances

Utterances est le système de commentaires que j’utilise sur ce blog. Son fonctionnement est simple : Utterance lie chaque article de votre blog à une “Issue” Github. Pour commenter, il faut donc que votre lecteur ait un compte Github, mais si, comme moi, vous avez un blog qui parle de programmation, ça fera l’affaire.

Staticman

Staticman est un projet opensource qui permet a vos commentaires de vivre dans Github.

TalkYard

TalkYard est utile si vous avez besoin d’un système de commentaires plus important en volume.

Gitalk

Avec Gitalk, vous retrouverez le système d’issues de github adapte a une section commentaires dans votre blog. Il est similaire à Utterance mais en Preact.

Lier Gatsby et Wordpress

Si vous venez de Wordpress ou que vous aimez leur système de commentaires, vous pouvez aussi lier Wordpress à votre site Gatsby avec l’API Wordpress.

D’ailleurs si vous voulez en apprendre plus sur Wordpress, j’ai écrit un article pour savoir comment avoir votre blog Wordpress en moins de 10 minutes.

Comment héberger son site Gatsby gratuitement ?

Une fois que vous avez créé un site, vous devez réfléchir à la manière de l’héberger. Il existe plusieurs options gratuites dont : GitHub Pages, Netlify ou encore Vercel (anciennement Zeit Now).

Host Gatsby.js gratuitement sur Netlify

Netlify est particulièrement performant avec leurs services gratuits de générations de contrats SSL (votre https gratuit), de déploiement continu et leurs tooling en géréral.

Vous pourrez aussi y acheter votre nom de domaine ce qui fait de Netlify la seule plateforme dont vous aurez besoin pour commencer vos sites Gatsby.

Pour ajouter votre site à Netlify, il vous suffit de créer un compte, de créer un lien vers votre GitHub et de cliquer sur le bouton “Create site from git”.

Deployer son site Gatsby sur Vercel

J’ai choisi Vercel pour sa simplicité et car j’ai plusieurs projets dans leur framework Next.js.

Ils proposent globalement la meme chose que Netlify, vous pouvez également commencer votre site Gatsby en un clic avec leur boilerplate.

Pourquoi utiliser GatsbyJs ?

Gatsby pour des applications mobiles

Gatsby est super rapide. En utilisant la vitesse de Gatsby et la puissance de PWA (Progressive Web Apps), vous pourrez créer une expérience semblable à celle d’une application mobile, où l’utilisateur aura l’impression de changer de page dans une application mobile, plutôt que d’être sur un site web ou une application avec une WebView.

Les Starters Gatsby

Il existe une quantité suffisante de GatsbyJs Starters qui vous serviront de boilerplate pour vos sites. De cette façon, vous pouvez développer complètement des sites web comme votre Blog a partir d’une bonne structure de base qui vous permettra de personnaliser votre site a votre image.

Les Plugins

Il existe des plugins étonnamment utiles qui sont disponibles sur le site officiel de Gatsby, que vous pouvez installer avec npm ou yarn. Voici quelques plugins utiles :

• gatsby-plugin-sitemap : Gênerez un sitemap automatiquement à chaque déploiements
• gatsby-plugin-canonical : Obtenez des “balises” canonical sur les pages de votre site

Gatsby et la JAMstack

JamStack est un modèle de sites base sur le JavaScript, des API et du Markup.

Construire des sites web avec Gatsby est une nouvelle façon de suivre la culture JAMstack. Il en résulte une meilleure performance, une sécurité accrue, une mise à l’échelle facile et peu coûteuse, une meilleure expérience pour le développeur.

JavaScript

Les fonctionnalités dynamiques sont gérées par JavaScript avec les bibliothèques que vous voulez.

APIs

Les opérations côté serveur sont extraites dans des API réutilisables et accessibles via HTTPS avec JavaScript. Ça peut être des APIs externes ou votre propre API.

Markup

Les sites web sont servis sous forme de fichiers HTML static. Ils peuvent être générés à partir de fichiers sources, tels que le Markdown, à l’aide d’un générateur de sites statiques.

En quoi Gatsby est-il différent de React ?

Comme il ne s’agit que de ReactJS lui-même, vous pouvez utiliser les techniques et composants existants de ReactJS. La communauté React JS est puissante avec beaucoup de components et de librairies open-source.

Ecrire vos pages en Markdown

Markdown est une syntaxe simple qui peut être utilisée pour écrire du texte riche. Vous pouvez utiliser Markdown dans Gatsby et le convertir en un blog basé sur Markdown. Chaque fois que vous avez besoin d’écrire un nouvel article, il vous suffit d’ajouter un nouveau fichier .md et de pousser le code, c’est tout !

Gatsby est-il bon pour le SEO ?

L’utilisation de GatsbyJs permet à vos sites web d’exploiter un grand nombre de techniques d’optimisation utilisées par le code interne. Ainsi, votre site web est mieux classé dans les moteurs de recherche. Il existe également de nombreux plugins qui peuvent vous aider à améliorer ce classement.

Le temps de build de Gatsby JS

Plus le contenu de votre site web augmente, plus le temps de build est long. Cela est non seulement décevant au cours du développement, mais cela prend aussi du temps pendant le déploiement. Donc si vous voulez construire un site qui change très souvent, Gatsby n’est pas recommandé.

Partagez votre blog gatsby

Vous savez maintenant comment lancer et héberger votre site Gatsby gratuitement.

La route est encore longue pour avoir un blog qui vous ressemble mais vous avez les meilleures fondations pour commencer votre blog de développeur.

Maintenant à vous de jouer ! N’hésitez pas à partager votre blog sur Twitter pour des retours de la communauté.