Article original : Learn Gatsby, a Static Site Generator
Gatsby est un générateur de site web. C'est un framework gratuit et open source basé sur React qui aide les développeurs à créer des sites web et des applications rapides.
Nous venons de publier un cours de 9 heures sur Gatsby sur la chaîne YouTube freeCodeCamp.org qui vous apprendra à utiliser la dernière version du framework.
À la découverte de Gatsby.
Pendant ce cours, vous apprendrez à créer et à déployer un site web interactif de recettes.
Le cours contient les sections suivantes :
- Informations sur Gatsby
- Structure du cours
- Prérequis du cours
- Vs Code
- Introduction au module
- Installer Gatsby-Cli
- Configurer un nouveau projet Gatsby
- Structure des dossiers
- Première page
- Page d'erreur
- Structure imbriquée
- Liens
- Barre de navigation
- Composant de mise en page
- Introduction aux modules CSS
- CSS en ligne
- CSS global
- Problèmes de nommage CSS
- Modules CSS
- Composants stylisés
- Nettoyage
- Styles
- Pied de page
- Page d'erreur
- Page de contact
- Actifs et icônes
- Configuration de la barre de navigation
- Logique de la barre de navigation
- Informations sur l'image Gatsby
- Configuration du bac à sable
- Installer le plugin
- Configuration de l'image statique
- Props et options partagés
- Exemple d'options
- Toutes les mises en page
- Hauteur
- Page À propos
- Page Héros
- Introduction à Gatsby et GraphQL
- La couche de données de Gatsby en bref
- Interface GraphiQL
- SiteMetadata
- Première requête
- Explorer
- Requête statique vs requête de page
- Hook UseStaticQuery - Exportateur de code
- UseStaticQuery, GraphQL - À partir de zéro
- Alias de champ
- Mot-clé de requête, nom et nettoyage Gatsby
- Requête de page
- Installer le plugin SOURCE-FILESYSTEM
- Champ AllFile
- Arguments de requête
- Correction de chemin statique
- Fichier - Champ
- SourceInstanceName - Argument
- Configuration de la galerie
- Champ GatsbyImageData
- Rendre la galerie
- Fonction d'assistance GetImage
- Données locales vs externes
- CMS sans tête
- Contentful
- Configurer un compte Contentful
- Type de contenu
- Contenu
- Connecter Gatsby - Contentful
- Variables ENV
- Champ AllContentfulRecipe
- Composant AllRecipes
- Composant RecipesList
- Recettes en vedette
- Configuration des utilitaires
- Fonction d'assistance
- TagsList
- Page des tags
- Configuration de la page de modèle de recette
- Visite guidée de la page de modèle de recette
- Slugify
- Variables de requête
- Requête de modèle de recette
- Retour du modèle de recette
- Configuration de GATSBY-NODE.JS
- Créer des pages de tags de manière programmatique
- Retour du modèle de tag
- Correction possible de bug
- Polices
- Formulaire de contact
- FAVICON
- Configuration SEO
- SEO - Props
- SEO - Complet
- Informations sur Netlify
- Netlify - Glisser-déposer
- Déploiement continu
- Webhooks
Regardez le cours complet ci-dessous ou sur la chaîne YouTube freeCodeCamp.org (9 heures de visionnage).