Tutoriel pour créer un site web avec Gatsby

Pourquoi choisir Gatsby pour un site statique

Gatsby est un générateur de sites statiques qui s’appuie sur React. Il permet de produire des sites rapides, optimisés pour le référencement et faciles à déployer. Sa force : combiner rendu statique, récupération de données via GraphQL et écosystème de plugins pour gérer images, SEO, CMS, etc.

À retenir : Gatsby simplifie la création de sites rapides et maintenables en réunissant React, GraphQL et un écosystème de plugins dédiés.

Prérequis

• Node.js installé (version récente recommandée).
• npm ou yarn pour la gestion des paquets.
• Un éditeur de code (VS Code, par exemple).
• Un compte Git (optionnel mais recommandé) et une plateforme de déploiement (Netlify, Vercel, GitHub Pages).

Installer Gatsby CLI

Ouvrez un terminal puis :

npm install -g gatsby-cli

ou, si vous préférez yarn :

yarn global add gatsby-cli

Créer un nouveau projet Gatsby

1. Créez le site à partir d’un starter officiel ou personnalisé :

gatsby new mon-site https://github.com/gatsbyjs/gatsby-starter-default

2. Entrez dans le dossier et lancez le serveur de développement :

cd mon-site
gatsby develop

3. Ouvrez http://localhost:8000 pour voir le site et http://localhost:8000/___graphql pour tester les requêtes GraphQL.

Structure de base d’un projet Gatsby

La structure classique contient :

• /src : code source (pages, composants, styles)
• /static : fichiers statiques (favicon, etc.)
• gatsby-config.js : configuration du site et plugins
• gatsby-node.js : création dynamique de pages

Exemple minimal gatsby-config.js

Configurez les métadonnées et plugins essentiels (sans inventer de valeurs) :

module.exports = {
  siteMetadata: {
    title: "Mon site Gatsby",
    description: "Description courte du site",
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Utiliser GraphQL pour alimenter les pages

Gatsby compile les données à la construction et expose un endpoint GraphQL. Exemple d’utilisation :

• Créez une page React (src/pages/index.js) et exportez une requête GraphQL avec la variable pageQuery.
• Dans le composant, récupérez les données via la prop data pour afficher du contenu.

Avantages pratiques :

• Fusion de données issues de fichiers Markdown, CMS externes, APIs ou systèmes de fichiers.
• Requêtes déclaratives qui limitent l’hydratation côté client.

Créer des pages dynamiques (programmatic pages)

Dans gatsby-node.js, utilisez l’API createPages pour transformer des fichiers de contenu en pages :

• Récupérez les nœuds via une requête GraphQL (par ex. tous les fichiers Markdown).
• Pour chaque nœud, appelez createPage en passant le template et le contexte.

Ce modèle sert pour les blogs, fiches produits ou toute page issue d’une source de données.

Optimisation des performances (bonnes pratiques)

• Images : utilisez gatsby-plugin-image et formats modernes; activez le lazy-loading.
• CSS/JS : divisez le code (code-splitting), importez seulement ce dont vous avez besoin.
• SEO : ajoutez meta tags via react-helmet et créez un sitemap via gatsby-plugin-sitemap.
• Données critiques : préchargez les ressources critiques et réduisez les requêtes externes bloquantes.

Tableau synthétique des plugins utiles

Besoin	Plugin recommandé	Pourquoi
Images modernes et lazy-loading	gatsby-plugin-image + gatsby-plugin-sharp	Optimisation et génération d’images responsive
SEO et meta tags	gatsby-plugin-react-helmet	Gérer title, meta description et balises sociales
Sitemap	gatsby-plugin-sitemap	Génération automatique du sitemap
Sources de contenu (Markdown, CMS)	gatsby-source-filesystem, gatsby-transformer-remark, plugins CMS	Intégration de contenu local ou externe
Déploiement	gatsby-plugin-netlify (optionnel)	Intégrations et headers pour hébergeurs statiques

Déploiement pas à pas

1. Construisez la version optimisée :

gatsby build

2. Le répertoire public contient les fichiers statiques prêts à être envoyés.
3. Déploiement rapide :

• Sur Netlify ou Vercel, connectez votre dépôt GitHub/GitLab et configurez la commande de build gatsby build et le dossier de publication public.
• Vous pouvez aussi héberger sur un serveur traditionnel en copiant le contenu du dossier public.

Bonnes pratiques pour le développement et la maintenance

• Versionnez le projet avec Git et automatisez les builds via CI/CD.
• Testez régulièrement en local et sur une préproduction avant déploiement.
• Tenez à jour vos dépendances et surveillez les plugins obsolètes.
• Documentez la structure et les commandes essentielles du projet dans le README.

À retenir : Un site Gatsby bien configuré combine performance, facilité de maintenance et pipeline de déploiement simple, tout en restant extensible grâce aux plugins.