Thomas Collart

Gatsby JS

Gatsby JS

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.

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.

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

Gastby 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 les performances de 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.

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.

Lier Gatsby et Wordpress

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 heberger son site Gastby 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 simplicite et car j’ai plusieurs projets dans leur framework Next.js.

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

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’etre 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 boilerplates 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 : Generez un sitemap automatiquement a chaque deploiements
  • gatsby-plugin-canonical : Obtenez des “balises” canonical sur les pages de votre site

Gatsby et la JAMstack

JAMStack Gatsby

Jamstack est un modele 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 librairies que vous voulez.

APIs

Les opérations côté serveur sont extraites dans des API réutilisables et accessibles via HTTPS avec JavaScript. Ca peut etre 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 heberger votre site Gatsby gratuitement.

La route est encore longue pour avoir un blog qui vous ressemble mais vous avez les meilleures fondations pour commencencer votre blog de developpeur.

Maintenant à vous de jouer ! N’hesitez pas à partager votre blog en commentaire pour recevoir des retours de la communauté.



Je m'appelle Thomas. Depuis ma sortie de la première promo de l'École 42, j'ai développé une app qui a été téléchargée plus de 400.000 fois. J'ai lancé près de 10 idées de startups et de nombreux autres business. Sur ce blogue, je vous apprends comment utiliser le Code pour devenir libre.

Envie de gagner plus d'argent avec le code ?
Suivez la newsletter !
Désinscrivez-vous quand vous voulez
Gratuit, c'est un très bon prix
Les emails sont gratuits. Vos informations sont stockées de manière sécurisée et privée. Vous pourrez vous désinscrire en un clic et à tout moment.