Catégories
Astuces et Design

Premiers pas avec Gatsby: créez votre premier site statique

Vous envisagez de prendre le train en marche Jamstack? Si votre réponse est oui, alors Gatsby, l'un des générateurs de sites statiques Jamstack les plus populaires, pourrait être exactement ce que vous recherchez. Voici notre guide pour démarrer avec Gatsby.

JAM signifie JavaScript, API et Markup. En d'autres termes, alors que les parties dynamiques d'un site ou d'une application pendant le cycle de demande / réponse sont prises en charge par JavaScript dans le client, tous les processus côté serveur ont lieu à l'aide d'API accessibles via HTTPS par JavaScript, et le balisage basé sur un modèle est prédéfini à temps de déploiement, souvent à l'aide d'un générateur de site statique. C’est le Jamstack. Il est performant, peu coûteux à évoluer et offre une meilleure sécurité et une expérience de développement fluide.

Pourquoi utiliser un site statique

Le modèle de site statique ne convient pas à tous les types de projets, mais lorsqu'il le fait, il présente un certain nombre d'avantages. En voici quelques-uns.

La vitesse

Le temps nécessaire au chargement d'un site Web dans le navigateur lors de la première demande est un facteur important pour l'expérience utilisateur. Les utilisateurs s'impatientent très rapidement et les choses ne peuvent qu'empirer avec des connexions lentes. Un manque d'appels de base de données et le contenu pré-généré rendent les sites statiques très rapides à charger.

Un site statique est constitué de fichiers statiques qui peuvent être facilement servis partout dans le monde à l'aide de réseaux de diffusion de contenu (CDN). Cela permet d'exploiter le centre de données le plus proche de l'endroit où la demande est effectuée.

Hébergement simplifié

L'hébergement de sites statiques peut être configuré en un clin d'œil. Comme il n'y a pas de base de données ou de code côté serveur, de langages ou de frameworks spéciaux à prendre en charge, tout ce que l'hébergement a à faire est de servir des fichiers statiques.

Meilleure sécurité

Sans code côté serveur ni base de données, les pirates n’ont rien à pirater. Il n'y a aucun souci à maintenir le serveur à jour avec des correctifs de sécurité et des correctifs. Tout cela signifie beaucoup plus de tranquillité d'esprit en ce qui concerne la sécurité de votre site Web.

Meilleure expérience des développeurs

La configuration de votre site Web statique avec une société d'hébergement telle que Netlify ou Vercel est simple et, avec un déploiement continu, il vous suffit de pousser vos modifications vers le référentiel de code de votre choix et elles sont immédiatement reflétées dans la version en direct.

Qu'est-ce que Gatsby?

Gatsby est aujourd'hui l'un des outils les plus populaires pour créer des sites Web. C’est plus qu’un générateur de site statique. En fait, il s'agit d'un «cadre open source basé sur React pour la création de sites Web et d'applications». Comme Gatsby est construit sur React, tous les avantages de React sont à portée de main, ce qui vous permet de profiter de cette puissante bibliothèque pour créer des composants interactifs directement dans votre site Web statique. Gatsby est également construit avec GraphQL, vous pouvez donc interroger les données et les afficher sur votre site Web comme vous le souhaitez.

Installer Gatsby et créer votre projet

Gatsby est mis en place à l'aide de Webpack, mais vous n'avez pas à vous soucier des manœuvres de configuration compliquées; Gatsby CLI s'occupe de tout pour vous.

Pour ce didacticiel, je suppose que Node.js est installé localement. Si ce n’est pas le cas, accédez à la page d’accueil de Node et téléchargez les binaires appropriés pour votre système. Vous pouvez également envisager d'utiliser un gestionnaire de versions pour installer Node. Nous avons un tutoriel sur l'utilisation d'un anager de version ici.

Node est fourni avec npm, le gestionnaire de packages Node, que nous allons utiliser pour installer certaines des bibliothèques que nous utiliserons. Vous pouvez en savoir plus sur l'utilisation de npm ici.

Vous pouvez vérifier que les deux sont correctement installés en exécutant les commandes suivantes à partir de la ligne de commande:

node -v
> 12.18.4

npm -v
> 6.14.8

La première chose à faire est d'installer la CLI Gatsby. C'est un npm package qui vous permet de créer un site Gatsby en quelques secondes. Dans votre terminal, écrivez:

npm install -g gatsby-cli

Avec la CLI Gasby installée sur votre machine, vous pouvez continuer et créer votre site Web. Je vais l'appeler sitepoint-demo, mais vous êtes libre de l'appeler comme vous le souhaitez. Dans votre terminal, saisissez:

gatsby new sitepoint-demo

Une fois que l'interface de ligne de commande Gatsby a installé tous les fichiers nécessaires et les a configurés de manière appropriée, vous disposez d'un site Web Gatsby entièrement fonctionnel, prêt à être personnalisé et développé. Pour y accéder, accédez au sitepoint-demo dossier:

cd sitepoint-demo

et démarrez le serveur local:

gatsby develop

Enfin, ouvrez une fenêtre sur http: // localhost: 8000 où vous trouverez votre site Gatsby brillant ressemblant à ceci:

Modèle par défaut de Gatsby

Pour mettre rapidement un site Web en marche, Gatsby profite de plusieurs passe-partout officiels ainsi que des démarreurs proposés par la forte communauté qui l'entoure. Le site que vous venez de créer utilise le démarreur par défaut de Gatsby, mais vous pouvez en trouver beaucoup plus sur le site Web de Gatsby.

Si vous souhaitez utiliser un démarreur différent de celui par défaut, vous devez spécifier son URL dans la ligne de commande, en suivant ce modèle:

gatsby new (SITE_DIRECTORY_NAME) (URL_OF_STARTER_GITHUB_REPO)

Par exemple, supposons que vous souhaitiez une présentation de Material Design pour votre site. Le moyen le plus rapide de le créer est d'utiliser Gatsby Material Starter en tapant la commande suivante dans votre terminal:

gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter

Génial! Jetons maintenant un œil aux fichiers de votre tout nouveau projet Gatsby.

Une visite à l'intérieur de votre site Gatsby

Un bon point de départ est le /src/ annuaire. Voici ce que vous trouverez.

pages Annuaire

le /src/pages/ l'annuaire contient les pages de votre site. Chaque page est un composant React. Par exemple, le code de la page d'accueil de votre site se trouve dans /pages/index.js et ressemble à ceci:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
<Layout>
  <SEO title="Home" />
  <h1>Hi peopleh1>
  <p>Welcome to your new Gatsby site.p>
  <p>Now go build something great.p>
  <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
    <Image />
  div>
  <Link to="/page-2/">Go to page 2Link>
  <Link to="/using-typescript/">Go to "Using TypeScript"Link>
Layout>
)

export default IndexPage

C’est le code typique d’un composant React.

Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables et de penser à chaque élément de manière isolée. … Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées arbitraires (appelées «accessoires») et renvoient des éléments React décrivant ce qui devrait apparaître à l'écran. – Réagissez aux documents.

components Annuaire

le /src/components/ Le répertoire est l'endroit où vous trouvez les composants généraux de votre site Web. Le démarreur par défaut est livré avec les composants suivants: En-tête (header.js), Image (image.js), Disposition (layout.js) et SEO (seo.js). Vous êtes libre de personnaliser ces composants et d’ajouter les vôtres au même répertoire.

Vous êtes maintenant prêt à commencer à apporter des modifications à votre nouveau site et à le personnaliser à votre goût.

Comment apporter des modifications à votre site Gatsby

Essayons de modifier le message affiché sur la page d'accueil. Ouvert pages/index.js dans votre éditeur de code et remplacez les deux paragraphes sous le

tag avec ce paragraphe:

<p>Welcome to my SitePoint Demo Site!p>

Bien sûr, vous pouvez ajouter le texte de votre choix entre les

Mots clés.

Dès que vous frappez sauvegarder, vos modifications sont affichées dans le navigateur grâce à Gatsby’s rechargement à chaud environnement de développement. Cela signifie que lorsque vous développez un site Gatsby, les pages sont surveillées en arrière-plan afin que lorsque vous enregistrez votre travail, les modifications soient immédiatement visibles sans avoir besoin d'une actualisation de la page ou d'un redémarrage du navigateur.

Gatsby facilite l'ajout de nouvelles pages. Par exemple, ajoutons une page À propos en créant un nouveau fichier, about.js, à l'intérieur de /pages/ répertoire et entrez ce contenu:

import React from "react"

const AboutPage = () => <h1>About Meh1>

export default AboutPage

Le code ci-dessus est un Composant fonctionnel React qui affiche du texte.

Enregistrez votre travail et accédez à http: // localhost: 8000 / about et vous devriez voir le À propos de moi

titre sur votre écran.

Vous pouvez rapidement créer un lien vers votre nouvelle page À propos de la page d'accueil en utilisant le Composant Gatsby Link. Pour voir comment cela fonctionne, ouvrez index.js dans votre éditeur de code et localisez ce morceau de code juste avant le balise de fermeture:

<Link to="/page-2/">Go to page 2Link>

Ensuite, remplacez la valeur du to propriété avec /about/ et le Aller à la page 2 texte avec Sur:

<Link to="/about/">AboutLink>

Enregistrez votre travail et vous devriez voir votre nouveau lien à l'écran. Clique sur le Sur lien et vous êtes instantanément sur la page À propos.

Gatsby utilise le Composant de lien pour les liens internes. Pour les liens externes, vous devez utiliser le bon vieux comme vous le feriez sur un site Web HTML classique.

Maintenant, testons l'aspect et la convivialité de votre site Gatsby en modifiant quelques styles.

Styliser votre site Gatsby

Gatsby propose un certain nombre d'options pour appliquer des règles de style à votre site Web.

Feuille de style globale

Un choix familier consiste à utiliser une .css fichier contenant des règles applicables à l'ensemble du site Web. Pour commencer, ajoutez un /styles/ répertoire dans le /src/ répertoire et ajoutez un global.css fichier à lui: /src/styles/global.css . Vous êtes libre de choisir le nom de votre choix pour le répertoire et le fichier de feuille de style. À l'intérieur global.css, ajoutez la déclaration CSS suivante, qui sera appliquée à l'ensemble du site Web:

body {
  background-color: yellow;
}

Maintenant, enregistrez votre travail. Oups, rien ne s'est passé! Pas encore en tout cas. Pour que cela fonctionne, vous devez faire un pas supplémentaire. Ouvert gatsby-browser.js dans votre éditeur de code et importez la feuille de style que vous venez de créer:

import "./src/styles/global.css"

Revenez à votre navigateur et vous devriez voir que la couleur d'arrière-plan de votre site Web est devenue jaune vif. Pas idéal comme choix de couleur, mais ça marche!

Styles globaux avec un composant de mise en page partagé

Bien que l'ajout d'une feuille de style globale et son importation dans gatsby-browser.js fonctionne très bien, la méthode recommandée pour ajouter des styles globaux à votre site Web Gatsby consiste à utiliser un composant de mise en page partagé. Le Gatsby Default Starter est livré avec ce composant et sa feuille de style associée prêts à l'emploi.

Pour voir comment cela fonctionne, supprimons l'instruction d'importation ci-dessus de gatsby-browser.js et enregistrez le fichier. L'arrière-plan de votre site Web devrait devenir blanc. Ensuite, ouvrez layout.js et layout.css dans votre éditeur de code (vous trouverez les deux fichiers dans le components/ annuaire).

Au sommet de layout.js, notez l'instruction d'importation, qui rend les règles CSS contenues dans layout.css disponible pour le composant Mise en page partagé et donc pour l'ensemble du site:

import "./layout.css"

Dans layout.css, recherchez la déclaration CSS pour l'élément body. Il devrait être autour de la ligne 8. Voici à quoi cela ressemble:

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: hsla(0, 0%, 0%, 0.8);
  font-family: georgia, serif;
  font-weight: normal;
  word-wrap: break-word;
  font-kerning: normal;
  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  font-feature-settings: "kern", "liga", "clig", "calt";
}

Maintenant, ajoutez une règle pour la couleur d'arrière-plan, quelque chose comme ceci:

background-color: yellow;

Enregistrez votre travail et la couleur d'arrière-plan de votre site Web devrait redevenir jaune.

Styles à l'échelle des composants: modules CSS

Un module CSS est un fichier CSS dans lequel tous les noms de classe et les noms d'animation sont définis localement par défaut.

Avec les modules CSS, vos styles ne sont appliqués qu'à un composant spécifique, ce qui permet de garder les composants autonomes et donc faciles à entretenir et à réutiliser.

Les modules CSS sont fournis avec Gatsby prêts à l'emploi et la documentation recommande cette façon d'ajouter des styles aux composants Gatsby et aux composants React en général.

Suivez ces étapes pour ajouter un composant de paragraphe sophistiqué à votre page À propos.

Créer le composant de paragraphe fantaisie

À l'intérieur de /components/ répertoire de votre projet basé sur Gatsby Default Starter, créez un fichier et appelez-le fancy-paragraph.js.

Ouvert fancy-paragraph.js dans votre éditeur de code et entrez le code suivant:

import React from "react"
import fancyParagraphStyles from "./fancy-paragraph.module.css"

const FancyParagraph = (props) => <p className={fancyParagraphStyles.fancy}>{props.paragraphText}</p>

export default FancyParagraph

Il s’agit d’un simple composant fonctionnel React – rien de nouveau à part l’instruction qui importe le module CSS aux paragraphes sophistiqués, que nous n’avons pas encore créé.

Le composant utilise les styles contenus dans le module Fancy-Paragraph comme valeur à l'intérieur du className propriété. Comme vous pouvez le voir, cette valeur ressemble beaucoup à un objet JavaScript standard qui utilise .fancy, qui est le nom de la classe, comme le fancyParagraphStyles propriété de l'objet. Vous allez écrire les styles de cette classe dans votre module CSS.

Créer le module CSS Fancy Paragraph

À l'intérieur /components/, créez un autre fichier et appelez-le fancy-paragraph.module.css. Ouvrez ce fichier et stylisez le .fancy classe de toute façon votre fantaisie te prend. C'est juste du CSS ordinaire. Voici à quoi ressemble le mien:

.fancy {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.5rem;
  color: #fff;
  background-color: rebeccapurple;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

Maintenant, vous êtes prêt à utiliser votre FancyParagraph composant avec vos styles fantaisie n'importe où sur votre site Gatsby.

Ajoutons un paragraphe sophistiqué à votre page À propos.

Ajouter le composant de paragraphe fantaisie à la page À propos

Commencez par ajouter ces deux instructions d'importation à votre page À propos, juste en dessous de l'importation React déjà existante:

import Layout from "../components/layout"
import FancyParagraph from "../components/fancy-paragraph"

L'extrait de code ci-dessus rend le composant Gatsby Layout, que vous allez utiliser dans votre page À propos, et le composant Paragraphe fantaisie que vous venez de créer disponibles sur votre page À propos.

Ensuite, modifiez votre AboutPage composant fonctionnel pour ressembler à ceci:

const AboutPage = () => (
<Layout>
 <h1>About Meh1>
 <FancyParagraph paragraphText="Styled with CSS Modules." />
Layout>
)

Votre nouveau composant fonctionne comme n'importe quel autre composant React. Il suffit de le claquer sur la page, à l'endroit exact où vous voulez qu'il apparaisse, et vous avez terminé. Ce composant particulier exploite les accessoires React pour rendre le texte du paragraphe plus dynamique.

Enregistrez votre travail et accédez à la page À propos, où vous devriez voir votre paragraphe de fantaisie dans toute sa splendeur. Le mien ressemble à ceci:

À propos de la page stylisée avec des modules CSS

Mission accomplie!

Styles à portée de composant: styles en ligne

Les styles CSS en ligne sous la forme d'un objet JS sont une option de style supplémentaire que vous pouvez utiliser.

Votre projet basé sur Gatsby Default Starter montre cette technique en action. Par exemple, ouvrez index.js dans votre éditeur et localisez ce code dans le IndexPage composant:

<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
  <Image />
div>

Remarquez comment les styles CSS sont appliqués au

qui contient le Image composant: les styles prennent la forme d'un objet JS où les noms de propriété CSS sont les clés et les valeurs CSS sont leurs valeurs correspondantes.

Notez également comment les noms de propriétés CSS composés suppriment le symbole tiret (-) et utilisent la convention camelCase à la place – par exemple, marginBottom, pas le CSS margin-bottom.

Ajouter du contenu à votre site Gatsby

Construire avec Gatsby présente l'avantage supplémentaire de pouvoir récupérer des données de pratiquement n'importe où. Par conséquent, vous n'êtes pas limité à la création de sites statiques, qui reposent généralement sur Markdown, et votre équipe peut facilement gérer le contenu en utilisant le back-end de son choix.

Une pléthore de plugins dédiés permet à Gatsby d'extraire des données de plusieurs sources – par exemple, le système de fichiers, les API, WordPress, etc. – et de combiner les données dans une couche de données qui peut être transmise à votre site Web.

Pour les sites Web simples, il est également possible de contourner la couche de données de Gatsby et de peupler votre site sans utiliser GraphQL ou l'un des plug-ins sources. Cette approche, également connue sous le nom de données non structurées approche, vous permet de récupérer les données et de les utiliser dans le createPage action à l'intérieur du createPages API. Bien que la récupération de données à partir d'une API soit assez familière aux développeurs JavaScript et pourrait donc être plus attrayante que l'utilisation de GraphQL, l'inconvénient est que l'élimination de la couche de données Gatsby signifie également la suppression de nombreux avantages qu'elle offre, tels que les performances. , rechargement à chaud pendant le développement, optimisation rapide de l'image, et bien plus encore.

Consultez ce dépôt GitHub si vous souhaitez en savoir plus sur l'approche des données non structurées.

Saisie manuelle de requêtes GraphQL dans une page Gatsby

Si vous avez une ou deux pages avec très peu de contenu qui change à peine, vous pouvez même coder en dur le texte directement dans une page Gatsby, comme nous l'avons fait dans la démo ci-dessus.

Si vous avez besoin d'extraire des données simples comme le titre et la description du site, vous pouvez entrer une requête GraphQL directement dans une page. Pour ce faire, il est utile de se familiariser avec GraphiQL, un IDE GraphQL (environnement de développement intégré) permettant de créer des requêtes GraphQL auquel vous pouvez accéder sur http: // localhost: 8000 / ___ graphql.

Supposons que vous souhaitiez afficher le titre de votre site sur une page. Tout d'abord, assurez-vous que le titre est déjà à l'intérieur gatsby-config.js. Le mien ressemble à quelque chose comme ça; vous pouvez entrer le titre de votre choix ou laisser celui par défaut:

module.exports = {
  siteMetadata: {
    title: `SitePoint Demo Gatsby Site`,
    ...
  },
  ...

Ensuite, créez la requête GraphQL à l'aide de GraphiQL. Enfin, apportez les modifications suivantes à la page de démarrage de la page 2 (src/pages/page-2.js), qui devrait maintenant ressembler à ceci:

const SecondPage = ({data}) => (
  <Layout>
    <SEO title="Page two" />
    <h1>Welcome to {data.site.siteMetadata.title}h1>
    <p>I have used a GraphQL queryp>
    <Link to="/">Go back to the homepageLink>
  Layout>
)

export const query = graphql`
  query testQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
export default SecondPage

Notez que nous passons un data prop au composant, qui contient les résultats de la requête GraphQL.

Redémarrez votre serveur et vous pourrez alors voir le titre du site affiché à la page 2 (http: // localhost: 8000 / page-2 /).

Données de titre de site utilisant GraphQL

Cependant, cette méthode n'a de sens que si la personne qui gère le contenu est familiarisée avec le codage. De plus, si vous décidez un jour de changer le texte, vous devrez rechercher les pages dans le répertoire de votre projet et remplacer manuellement le contenu.

Vous pouvez lire tous les détails sur cette approche dans la documentation Gatsby.

Extraire des données du système de fichiers

Vous pouvez utiliser le plugin gatsby-source-filesystem pour générer des données dans votre application Gatsby à partir de votre système de fichiers local. Cette approche peut être familière aux personnes qui ont travaillé avec des générateurs de sites statiques tels que Jekyll ou Hugo.

Ce plugin est déjà installé dans le démarreur par défaut de Gatsby, comme vous pouvez facilement le vérifier en ouvrant gatsby-config.js dans votre éditeur de code:

plugins: (
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    }, ...

Après avoir récupéré les données, vous aurez besoin d'un plug-in Transformer pour vous aider à transformer les nœuds de fichiers en différents types de données que vous pouvez consommer sur votre site. Par exemple, gatsby-transformer-json pour les données JSON, gatsby-transformer-remark pour les fichiers Markdown, et ainsi de suite.

Retrouvez tous les détails dans cette section de la documentation Gatsby.

Si vous optez pour les fichiers Markdown comme source de données pour votre site Gatsby, vous aurez la possibilité d'incorporer des composants réutilisables JSX dans le texte à l'aide de gatsby-plugin-mdx, un plugin Gatsby qui ajoute le support MDX à votre site. Voici les avantages:

Ceci est utile dans les sites axés sur le contenu où vous souhaitez pouvoir introduire des composants tels que des graphiques ou des alertes sans avoir à configurer un plugin. Il met l'accent sur la composition plutôt que sur la configuration et brille vraiment avec des articles de blog interactifs, des systèmes de conception de documentation ou des articles longs avec des interactions immersives ou dynamiques. – Docs de Gatsby.

CMS sans tête

CMS signifie système de gestion de contenu. Un CMS traditionnel offre à la fois des fonctionnalités back-end et front-end. Un CMS sans tête ou découplé se limite au back-end, laissant ainsi toutes les préoccupations du front-end aux préférences des développeurs. Cet arrangement est idéal pour un générateur de site comme Gatsby, car il permet aux membres de l'équipe de contenu d'utiliser toujours leur interface d'administration préférée pendant que les développeurs tirent pleinement parti des avantages de l'utilisation de Gatsby, React et GraphQL.

Les plates-formes CMS populaires telles que WordPress, Drupal, Contentful, Sanity et bien d'autres offrent un support sans tête et l'écosystème Gatsby met à disposition les plugins et guides appropriés pour vous aider dans l'intégration.

Consultez cet article de la documentation Gatsby pour en savoir plus sur l'extraction de données depuis le CMS de votre choix.

Déployer votre site Gatsby

Il existe des entreprises qui rendent très rapide et pratique l'hébergement de sites Web statiques. Parmi les plus populaires, on trouve:

Déployer votre site Web Gatsby sur Netlify

Utilisons Netlify pour lancer votre tout nouveau site Web Gatsby. Netlify fournit «un flux de travail tout-en-un qui combine déploiement global, intégration continue et HTTPS automatique».

Cela fonctionne très bien pour héberger des sites Web statiques.

Tout d'abord, vous devez créer une version de production de votre projet Gatsby. Pour ce faire, entrez la commande suivante dans votre terminal:

gatsby build

Vous avez maintenant un dossier nommé public contenant tous les fichiers statiques dont votre site Web a besoin pour s'exécuter dans le navigateur.

L'étape suivante consiste à placer votre projet Gatsby dans un référentiel tel que GitHub. Netlify prend en charge GitHub, GitLab ou Bitbucket: chaque fois que vous apportez des modifications à votre code, Netlify exécute une compilation avec l'outil de votre choix et déploie les résultats sur son CDN à chargement rapide.

Pour commencer, connectez-vous simplement à Netlify, sélectionnez Nouveau site de Git, choisissez votre référentiel, entrez votre commande de construction et le nom de votre dossier public, puis cliquez sur Déployer le site.

Vous pouvez passer en revue le processus de déploiement en détail dans cet article sur le site Web de documentation de Gatsby.

Félicitations, votre site Web Gatsby est en ligne!

Un peu plus sur le processus de construction

L'exécution de la commande build avant le déploiement crée une version de production de votre site Web alimenté par Gatsby avec toutes les optimisations requises pour des performances élevées et une expérience utilisateur exceptionnelle. Les pages HTML statiques créées par Gatsby au cours de ce processus sont à leur tour réhydratées dans une application React. Cela signifie que, lorsque les pages Gatsby s'exécutent dans un navigateur Web, le code JavaScript est téléchargé, permettant ainsi la manipulation du DOM, etc. En d'autres termes, votre site devient une application React à part entière.

Vous pouvez lire les détails sur la documentation Gatsby.

Le nuage de Gatsby

En 2019, Kyle Mathews, fondateur de Gatsby, a annoncé le lancement de Gatsby Cloud. Dans ses mots, Gatsby Cloud est

une plate-forme commerciale d'outils stables et fiables qui permettent aux créateurs Web de créer de meilleurs sites Web. Gatsby Cloud améliore notre plate-forme de maillage de contenu avec des solutions interopérables et prêtes à l'emploi pour lancer des sites Web plus rapidement et favoriser le succès commercial. – Annonce de Gatsby Cloud

En d'autres termes, Gatsby Cloud est une infrastructure basée sur le cloud qui offre de nombreux avantages lorsque vous créez, mettez à jour et déployez votre site Web Gatsby. Les fonctionnalités incluent:

  • Démarrage rapide du cloud, qui permet aux utilisateurs non techniques de créer des projets en quelques minutes à l'aide d'un CMS, d'un contenu factice et d'un démarreur Gatsby.
  • Aperçu en temps réel, ce qui est idéal pour prévisualiser les changements en temps réel et en contexte, facilitant ainsi la communication et la collaboration entre les membres de l'équipe travaillant sur votre site Web.
  • Intégrations CMS, qui est rapide et indolore, exploitant les plugins disponibles pour des centaines de systèmes de gestion de contenu et d'API.
  • Constructions incrémentielles, une fonctionnalité Gatsby Cloud introduite en avril 2020. Lorsque les données changent dans le CMS de votre choix, Incremental Builds ne reconstruira que ce qui est nécessaire, avec des gains de performances significatifs en conséquence.

Et il y a beaucoup plus…

Plugins Gatsby

De nombreux superpuissances de Gatsby proviennent de plugins. Les plugins Gatsby sont des packages Node.js que vous pouvez installer dans votre projet à l'aide de npm. L'écosystème Gatsby propose une tonne de plugins qui vous permettent de faire à peu près tout. J'ai déjà évoqué le rôle des plugins pour récupérer les données de plusieurs sources et les préparer à être consommées par un site Web Gatsby, mais il existe également des plugins pour ajouter des fonctionnalités pré-emballées avec des thèmes, intégrant automatiquement des services tiers comme Google Analytics création de pages à partir de composants React, gestion de fichiers SCSS / Sass, et bien d'autres.

Si JavaScript est votre pain et votre beurre, vous pouvez également vous essayer à la création de vos propres plugins. Consultez la page de création du plugin Gatsby pour plus de détails.

Prochaines étapes et ressources

Pour vraiment maîtriser Gatsby, rendez-vous sur son site Web et consultez le didacticiel officiel et la documentation. Je pense qu’ils sont de premier ordre.

De plus, pour tirer le meilleur parti de Gatsby, je vous recommande de vous familiariser avec la manipulation des données à l'aide de GraphQL. Profitez des super tutoriels sur le site Web de GraphQL.

Enfin, assurez-vous de jeter un œil à nos collections Jamstack Foundations, où vous trouverez nos guides sur Jamstack, et des outils Jamstack comme Gatsby, conçus pour vous aider au mieux à apprendre.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *