Introduction : comprendre l’approche Gatsby
Gatsby permet de construire des sites web avec React et de préparer à l’avance une grande partie de leurs pages. Le navigateur reçoit alors des fichiers prêts à afficher, ce qui peut favoriser une expérience rapide et fiable. Pendant ces deux journées, vous apprendrez à mettre en place un projet, organiser ses pages, intégrer des données et préparer la publication du site. La formation alterne explications, démonstrations et exercices progressifs, avec un fil rouge concret : créer un petit site éditorial composé d’une page d’accueil, de pages de contenu et d’images optimisées.
Nous aborderons également les limites et les cas d’usage de cette approche. Un site vitrine, un blog ou une documentation n’a pas les mêmes besoins qu’une application très interactive ou qu’un espace dont le contenu change en permanence. L’objectif est de comprendre les choix techniques, pas seulement de recopier une configuration.
Module 1 : démarrer un projet Gatsby
Installer et explorer le projet
Vous découvrirez les éléments nécessaires pour lancer un projet Gatsby, la structure de ses dossiers et le rôle des fichiers de configuration. Nous verrons comment démarrer le serveur de développement, consulter le site dans le navigateur et reconnaître les messages utiles dans le terminal. Vous prendrez aussi en main les commandes courantes pour construire le site et vérifier le résultat produit.
Créer une première page
À partir d’un composant React simple, vous réaliserez une page d’accueil et découvrirez comment Gatsby repère les pages du projet. Nous verrons comment partager une mise en page, créer des composants réutilisables et organiser les styles sans compliquer le code. Exemple concret : une page d’agence avec une navigation commune, une présentation des services et un pied de page.
Exercice pratique : créer la structure initiale du site fil rouge, ajouter sa page d’accueil et une page « À propos », puis vérifier que la navigation fonctionne.
Module 2 : structurer les pages et les modèles
Construire des parcours cohérents
Vous apprendrez à découper une interface en composants et à utiliser une mise en page commune pour plusieurs pages. Nous verrons comment transmettre des informations à un composant, garder des conventions de nommage lisibles et éviter de dupliquer inutilement le même code. L’exemple portera sur un site éditorial où plusieurs articles utilisent le même modèle de page, tout en conservant un contenu distinct.
Organiser les URL et les contenus
Nous étudierons les principes de création de pages et de modèles à partir d’une liste de contenus. Vous comprendrez comment relier une URL à une page et comment prévoir des chemins clairs pour les visiteurs. Nous aborderons aussi les erreurs fréquentes : pages introuvables, liens internes incorrects et modèles difficiles à faire évoluer.
Exercice pratique : ajouter une rubrique « Actualités », créer plusieurs pages d’article à partir d’un modèle partagé et contrôler les liens depuis une liste d’articles.
Module 3 : connecter les données avec GraphQL
Interroger les informations du site
Gatsby met à disposition une couche de données qui permet de rassembler des contenus provenant de différentes sources. Vous découvrirez comment explorer les données disponibles, formuler une requête GraphQL et afficher le résultat dans un composant. Nous utiliserons des données simples pour apprendre à sélectionner uniquement les champs nécessaires, comme un titre, une date ou un résumé.
Relier contenu et présentation
Nous verrons comment distinguer le contenu de sa mise en forme et comment cette séparation facilite les mises à jour. À titre d’exemple, une équipe éditoriale peut modifier un texte sans devoir réécrire la structure de la page. Nous discuterons des choix à faire selon le projet, notamment lorsqu’un contenu provient de fichiers locaux ou d’un système externe, sans supposer qu’une seule source convient à tous les sites.
Exercice pratique : afficher une liste d’articles issus des données du projet, puis créer une page de détail qui présente le titre, la date et le contenu de chaque article.
Module 4 : optimiser les images et les performances
Améliorer le chargement des pages
Vous apprendrez à repérer les éléments qui peuvent ralentir un site : images trop lourdes, ressources inutiles ou composants chargés sans nécessité. Nous verrons les principes de préparation et d’affichage d’images avec les outils adaptés à Gatsby, en tenant compte des formats et des tailles utiles. L’objectif est de servir une image de qualité suffisante sans transférer systématiquement un fichier disproportionné.
Mesurer avant de corriger
La performance ne se juge pas uniquement à l’impression ressentie par le développeur. Vous découvrirez comment observer le site produit, examiner les ressources chargées et identifier des améliorations prioritaires. Nous évoquerons aussi l’accessibilité et l’impact des choix d’interface : une page légère doit rester compréhensible, navigable et agréable à utiliser.
Exercice pratique : comparer une page contenant des images non optimisées avec une version améliorée, puis dresser une courte liste d’actions prioritaires à partir des observations.
Module 5 : générer, vérifier et publier le site
Préparer une version de production
Vous exécuterez la génération du site et apprendrez à vérifier les fichiers obtenus. Nous passerons en revue les contrôles essentiels avant publication : liens, pages manquantes, affichage sur différentes tailles d’écran et absence d’erreurs bloquantes. Vous comprendrez la différence entre travailler en mode développement et préparer une version destinée aux visiteurs.
Choisir un déploiement adapté
Nous présenterons les principes d’un hébergement de fichiers statiques et les étapes générales de publication sur une plateforme compatible. Vous identifierez les éléments à surveiller, comme les variables de configuration, les chemins de fichiers ou les règles de redirection. La publication sera abordée comme une étape du projet, à documenter et à tester plutôt que comme une simple commande finale.
Exercice pratique : générer une version de production du site fil rouge, effectuer une vérification avec une liste de contrôle et préparer les étapes de son déploiement.
À retenir
Gatsby associe React à une génération de pages qui peut convenir aux sites éditoriaux, vitrines et documentations. La qualité du résultat dépend autant de la structure du projet et des données que du soin apporté aux images, aux contrôles et au déploiement. Vous repartirez avec une méthode pour construire un site statique et évaluer les améliorations à apporter.
Pour aller plus loin
Après la formation, vous pourrez appliquer ces principes à un projet réel, approfondir la gestion de contenu avec une source adaptée à vos besoins et comparer les modes de rendu disponibles dans l’écosystème Gatsby. Pour progresser, faites évoluer le site fil rouge : ajoutez des catégories, vérifiez l’accessibilité des pages et mesurez l’effet de chaque optimisation avant de la retenir.
