Formation Gatsby Jamstack CMS

Programme de notre formation Gatsby Jamstack CMS

Jamstack & Gatsby : concepts et écosystème

• Principes Jamstack : SSG, CDN, edge
• Positionnement de Gatsby vs Next.js/Nuxt/Astro
• Architecture : GraphQL data layer, plugins, build
• Hébergement : Netlify, Vercel, Cloudflare Pages
• Bonnes pratiques SEO, perf et accessibilité
• Atelier : cadrer le projet et définir les objectifs

Démarrer un projet Gatsby moderne

• Initialiser avec create-gatsby et configuration
• Structure : src/pages, src/templates, gatsby-config
• ESLint/Prettier, environnements et secrets
• Images avec gatsby-plugin-image
• Données locales : Markdown/JSON
• Atelier : bootstrap et premier build

Data Sourcing & GraphQL

• Découvrir le schema et GraphiQL
• Plugins source (filesystem, REST, GraphQL, CMS)
• Gatsby Node APIs : createPages, onCreateNode
• Requêtes page vs static queries
• Optimiser les requêtes, éviter l’over-fetch
• Atelier : pages dynamiques depuis un dataset

Pages, templates, routes & MDX

• Pages automatiques vs createPage
• Routage, slugs, 404 et redirections
• MDX et composants interactifs
• Layouts et partials
• Internationalisation (i18n)
• Atelier : blog MDX avec templates

Styling & Design System

• CSS Modules, CSS-in-JS, Tailwind
• Composants accessibles et responsive
• Design tokens, couleurs, typo
• États de chargement, micro-interactions
• Optimiser LCP/CLS/INP
• Atelier : librairie de composants

Intégrer un Headless CMS

• Panorama : Contentful, Sanity, Strapi, etc.
• Modèle de contenu : types, validations, relations
• Webhooks et preview
• Images, rich text et blocs modulaires
• Gouvernance éditoriale
• Atelier : brancher un CMS et publier

Modes de rendu & fonctionnalités avancées

• SSG, DSG et SSR
• Données côté client (CSR) et formulaires
• Images avancées (AVIF/WebP, placeholders)
• SEO : metas, sitemap, JSON-LD
• PWA : manifest, service worker
• Atelier : page hybride SSG + données client

Qualité, tests & sécurité

• Tests unitaires et e2e (Jest/Playwright)
• Audit a11y et Lighthouse
• Observabilité front : logs, métriques
• Headers de sécurité, CSP, secrets
• RGPD : consentement, analytics
• Atelier : pipeline de tests + Lighthouse

Build, déploiement & CI/CD

• Optimiser le build (cache, images)
• Déployer sur CDN/edge
• Préviews éditoriales et branches
• Monitoring prod : erreurs, perfs
• Playbook de mise à jour
• Atelier : CI/CD complet (preview → prod)