Un guide complet pour construire des sites statiques avec Gatsby

Les sites web statiques ont fait leur retour ces dernières années grâce à leur rapidité, leur sécurité et leur simplicité. L’un des principaux outils de création de sites statiques est aujourd’hui Gatsby, un générateur de sites statiques (Static Site Generator ou SSG) ultra-rapide.

Que vous soyez un développeur web cherchant à créer un blog personnel, un site de portfolio ou un site d’entreprise, Gatsby peut vous aider à atteindre vos objectifs. Ce guide complet vous guide à travers le processus de création de sites statiques avec Gatsby. Il couvre tous les aspects, des bases aux sujets avancés.

Comprendre les sites statiques

Les sites statiques sont des pages web contenant des fichiers HTML, CSS et JavaScript pré-rendus. Contrairement aux sites dynamiques, ils ne dépendent pas d’un traitement côté serveur pour chaque requête. Au lieu de cela, tout le contenu est généré à l’avance et servi directement au navigateur de l’utilisateur. Cette approche présente plusieurs avantages :

1. Vitesse : Les sites statiques se chargent rapidement puisqu’il n’y a pas de traitement côté serveur.
2. Sécurité : En l’absence d’exécution de code côté serveur, les sites statiques sont moins vulnérables aux menaces de sécurité.
3. Évolutivité: Il est facile de mettre en cache et de distribuer des sites statiques par l’intermédiaire de réseaux de diffusion de contenu (CDN).
4. Simplicité : Ils sont plus faciles à développer, à déployer et à entretenir.

Maintenant que vous comprenez ce que sont les sites statiques et leurs avantages, plongeons dans Gatsby.

Qu’est-ce que Gatsby ?

Gatsby est un framework open-source basé sur la bibliothèque JavaScript React qui simplifie le processus de construction de sites web statiques. Il combine la puissance des composants React avec GraphQL pour la gestion des données, ce qui en fait un excellent choix pour les développeurs de tous niveaux. Voici pourquoi Gatsby se démarque :

1. Rapide comme l’éclair : Gatsby optimise la vitesse de votre site à l’aide de techniques telles que le fractionnement du code et le chargement différé, ce qui se traduit par des chargements de pages quasi instantanés.
2. Source de données flexible : Gatsby peut extraire des données de différents endroits, notamment de fichiers Markdown, d’API et de bases de données.
3. Un riche écosystème d’extensions : Le vaste écosystème d’extenions de Gatsby vous permet d’étendre ses fonctionnalités sans effort.
4. SEO et performance : Gatsby génère automatiquement du HTML optimisé pour un meilleur référencement et de meilleures performances.

Démarrer avec Gatsby

Pour suivre ce guide, vous devez avoir :

• Une compréhension fondamentale du HTML, du CSS et du JavaScript
• Une connaissance de base de React
• Node.js et npm (Node Package Manager) ou yarn installés sur votre ordinateur

Pour démarrer avec Gatsby et créer un projet, vous pouvez utiliser l’un des nombreux exemples de la bibliothèque de démarrage Gatsby ou créer un projet à partir de zéro.

Pour ce guide, nous utiliserons l’exemple officiel hello world starter pour GatsbyJS car il nous donne un projet simple sans extensions ni fichiers supplémentaires.

1. Tout d’abord, installez le CLI Gatsby sur votre ordinateur en exécutant la commande suivante :

npm install -g gatsby-cli

Exécutez gatsby --version pour vérifier si l’installation a réussi.

2. Ensuite, accédez au dossier dans lequel vous souhaitez créer votre projet et exécutez la commande suivante :

npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

Remplacez <project-name> par le nom de votre choix pour votre projet.

3. Une fois l’opération terminée, accédez au dossier du projet et démarrez le serveur de développement :

cd <project-name>
gatsby develop

Le serveur de développement local démarrera à l’adresse http://localhost:8000, où vous pourrez accéder à votre site Gatsby.

Comprendre la structure des fichiers Gatsby

Lorsque vous ouvrez votre projet dans un éditeur de code, vous voyez la structure suivante :

/
|-- /public
|-- /src
    |-- /pages
        |-- index.js
|-- /static
|-- gatsby-config.js

• /public : Ce répertoire contient la sortie de votre processus de construction Gatsby. C’est là que se trouvent les fichiers HTML, CSS, JavaScript et autres ressources générés.
• /src : C’est le cœur de votre projet Gatsby, où vous passerez la plupart de votre temps. Il contient divers sous-répertoires et fichiers :
  • /pages : C’est ici que sont stockées toutes les pages de votre projet. Chaque fichier JavaScript correspond à une route de votre site web.

• /static : Ce répertoire est utilisé pour les fichiers statiques que vous souhaitez inclure dans votre site, tels que les images, les polices ou les fichiers téléchargeables. Ces fichiers sont servis tels quels et ne sont pas traités par Gatsby.
• gatsby-config.js : Ce fichier de configuration est l’endroit où vous définissez divers réglages pour votre site Gatsby. Ici vous pouvez spécifier les extensions, les métadonnées du site et d’autres configurations.

Création de pages et de composants

Dans Gatsby, la création de pages web est un processus simple. Tout fichier JavaScript que vous créez dans le dossier /src/pages devient automatiquement une page avec sa route correspondante, grâce à la génération automatique de pages de Gatsby.

Vous pouvez créer autant de pages que nécessaire pour votre site web en ajoutant d’autres fichiers JavaScript au dossier /src/pages. Par exemple, vous pouvez créer un fichier about.js pour une page À propos.

Bien que vous puissiez créer des fichiers JavaScript individuels pour chaque page directement dans le dossier /src/pages, il est également possible d’organiser davantage vos pages. Vous pouvez créer des sous-dossiers pour regrouper des pages similaires. Par exemple, vous pouvez créer un dossier blog pour organiser toutes les pages liées à votre blog.

Pour ce projet, voici à quoi ressemblera la structure des pages :

|-- /src
    |-- /pages
        |-- about.js
        |-- index.js
        |-- /blog
            |-- index.js

Utilisation de JSX pour les pages

Gatsby étant construit sur React, ses pages et ses composants sont écrits en JSX (JavaScript XML). JSX est une extension syntaxique pour JavaScript qui vous permet de définir la structure et la disposition de vos interfaces utilisateur d’une manière très lisible et expressive.

Par exemple, vous pouvez créer le contenu de votre page d’accueil (index.js) comme suit :

import React from 'react';

export default function Home() {
  return (
    <>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
      </div>
    </>
  );
}

Lier des pages dans Gatsby

Pour créer un lien vers une autre page, vous pouvez utiliser le composant Link comme suit :

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
    return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <Link> to="/about">About Us</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </>
    );
}

Dans l’exemple ci-dessus, nous avons importé le composant Link depuis gatsby et l’avons utilisé pour créer des liens vers la page À propos de nous et un blog. La page À propos de nous, par exemple, a pour route /about. Lorsque les utilisateurs cliquent sur le lien À propos de nous, ils sont redirigés vers la page /about.

Pour créer des liens vers des sites web externes, vous pouvez utiliser des balises d’ancrage ordinaires (<a>) avec l’attribut href:

import React from 'react';

export default function Home() {
  return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <div>
                    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                    <p>Fast, Secure, Reliable Hosting Solution.</p>
                    <a href="https://kinsta.com/docs/static-site-hosting/" target="_blank" rel="noreferrer">
                        <div>Read more</div>
                    </a>
                </div>
            </div>
        </>
    );
}

Dans ce cas, le lien ouvre le site web externe dans un nouvel onglet du navigateur grâce aux attributs target="_blank" et rel="noreferrer".

Création de composants dans Gatsby

L’architecture à base de composants de Gatsby vous permet de créer des blocs de construction réutilisables pour vos pages web. Au lieu de dupliquer le code sur plusieurs pages, vous pouvez encapsuler les éléments communs dans des composants, ce qui rend votre base de code plus organisée, plus facile à maintenir et plus efficace.

Supposons que le code de votre page d’accueil comprenne la section de navigation, le contenu principal et un pied de page :

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return (
    <>
      <div className="nav-links">
        <Link> to="/">Home</Link>
        <Link> to="/about">About</Link>
        <Link> to="/blog">Blog</Link>
      </div>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <div className="footer">
        <p>
          Hosted with ❤️ by Kinsta's{' '}
          <a> href="https://kinsta.com/static-site-hosting">
            Static Site Hosting
          </a>
          .
        </p>
      </div>
    </>
  );
}

Imaginez que vous deviez dupliquer le code de la barre de navigation et du pied de page pour chaque page de votre site. C’est là que la puissance des composants entre en jeu. Vous pouvez créer des composants réutilisables pour la barre de navigation, le pied de page et chaque élément de code qui serait répété sur plusieurs pages et composants.

Pour travailler avec des composants dans Gatsby, créez un dossier components dans le dossier src pour stocker tous les composants. Ensuite, créez vos composants, par exemple Navbar.js et Footer.js. Dans le fichier Navbar.js, séparez le code de la manière suivante :

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <div className="nav-links">
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Et aussi votre Footer.js:

import React from 'react';
const Footer = () => {
    return (
        <div className="footer">
            <p>
                Hosted with ❤️ by Kinsta's{' '}
                <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
                .
            </p>
        </div>
    );
};

export default Footer;

Ensuite, importez vos fichiers de composants dans vos pages ou composants et utilisez cette méthode :

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <Footer />
    </>
  );
}

Création d’un composant de mise en page

Une pratique courante dans le développement web consiste à créer un composant de mise en page qui encapsule la structure globale de votre site. Le composant de mise en page comprend généralement des éléments qui apparaissent sur chaque page, tels que les en-têtes, les pieds de page, les menus de navigation et les colonnes latérales.

Créez un nouveau fichier appelé Layout.js dans votre dossier /src/components. Définissez ensuite la structure de la mise en page. Pour ce guide, la structure de mise en page ne comprendra que la barre de navigation et le pied de page :

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Dans ce composant de mise en page, nous utilisons les composants pour envelopper le contenu de la page (fourni à l’adresse children). Pour utiliser le composant de mise en page dans vos pages, importez-le et intégrez-le au contenu de votre page. Par exemple, dans votre page index.js:

import React from 'react';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

En utilisant un composant de mise en page, vous garantissez une structure et une apparence cohérentes sur l’ensemble de vos pages, tout en veillant à ce que votre code soit organisé et facile à maintenir. C’est un moyen puissant de gérer efficacement les éléments communs de votre site.

Styliser les pages et les composants dans Gatsby

Le style de votre site Gatsby est flexible et vous permet d’utiliser différentes approches, y compris le CSS simple, le CSS-in-JS ou les pré-processeurs CSS comme Sass. Voyons comment créer un style normal et un style de module pour les pages.

Style CSS

Dans Gatsby, vous pouvez facilement créer un fichier CSS et le lier à n’importe quel composant ou page, et il fonctionnera parfaitement. Par exemple, vous pouvez créer un dossier styles dans le dossier src, puis créer un fichier global.css avec votre code CSS.

Par exemple, voici quelques styles globaux de base pour les composants créés précédemment :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}

nav .logo-img {
    width: 100px;
}

nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}

@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }

    nav .nav-links a {
        padding: 0 18px;
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

Dans le code ci-dessus, vous importez la police Poppins de Google Fonts et définissez ensuite des styles de base à appliquer à tous vos composants.

Ensuite, importez le fichier CSS dans les composants que vous souhaitez styliser, mais pour ce projet, vous pouvez l’ajouter à votre composant Layout afin qu’il s’applique globalement :

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Module de stylisation CSS

Les modules CSS vous permettent d’appliquer vos styles à des composants ou à des pages spécifiques. Cela permet d’éviter les conflits de style et facilite la maintenance de votre code. Dans le dossier styles, créez vos modules CSS en utilisant le format <nom de la page>.module.css et ajoutez le style spécifique au fichier.

Par exemple, créez home.module.css pour la page d’accueil et ajoutez le code suivant :

.home_hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

.home_hero h1 {
    font-size: 60px;
    width: 70%;
}

.home_hero p {
    color: #6E7076;
    font-size: 20px;
}

.btn {
    background-color: #5333ed;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 5px;
    color: #fff;
}

@media (max-width:700px) {
    .home_hero h1 {
        font-size: 40px;
    }

    .home_hero p {
        font-size: 16px;
    }
}

Pour utiliser les styles CSS du module dans votre page ou composant Gatsby, importez les styles de votre module CSS en tant qu’objet en haut de votre page ou fichier de composant et utilisez cette méthode :

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';

export default function Home() {
  return (
    <Layout>
      <div className={styles.home_hero}>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div className={styles.btn}>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Utilisation de fichiers statiques dans Gatsby

Dans Gatsby, les fichiers statiques font référence à des ressources telles que des images, des polices, des fichiers CSS et d’autres ressources qui sont servies directement au navigateur du client sans aucun traitement côté serveur. Ces fichiers sont ajoutés au répertoire /static à la racine de votre projet.

Par exemple, si vous ajoutez une image kinsta-logo.png au répertoire /static, vous pouvez l’afficher dans votre composant comme suit :

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <Link> to="/">
                <img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
            </Link>
            <div className="nav-links">
                <Link> to="/">Home</Link>
                <Link> to="/about">About</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Gatsby résout automatiquement ces chemins relatifs en URL correctes lorsque votre site est construit. Plus loin dans ce guide, vous apprendrez comment optimiser les images dans Gatsby.

Plugins et intégrations

Gatsby dispose d’un riche écosystème d’extensions qui peuvent étendre ses fonctionnalités. Vous pouvez trouver des extensions pour le SEO, les statistiques, l’optimisation des images, la transformation markdown, et bien plus encore. L’installation et la configuration des extensions est simple, et elles peuvent grandement améliorer les capacités de votre site.

Dans ce guide, nous utilisons quatre extensions :

1. gatsby-transformer-remark: Cette extension vous permet de transformer des fichiers Markdown en contenu HTML, ce qui facilite la création et la gestion d’articles de blog, de documentation ou de tout autre contenu textuel.
2. gatsby-transformer-sharp et gatsby-plugin-sharp: Ces extensions travaillent ensemble pour optimiser et manipuler les images dans votre projet Gatsby.
3. gatsby-source-filesystem: Cette extension vous permet d’extraire des fichiers du répertoire de votre projet et de les rendre disponibles pour des requêtes avec GraphQL.

Pour utiliser ces extensions dans votre projet Gatsby, exécutez la commande suivante dans le répertoire racine de votre projet pour les installer :

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

Ensuite, configurez-les dans votre fichier gatsby-config.js. Voici un exemple de configuration des extensions :

module.exports = {
    plugins: [
        // ...other plugins
        // Transform Markdown files into HTML
        'gatsby-transformer-remark',
        // Optimize and manipulate images
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        // Source files from your project directory
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts/`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
    ],
};

Deux configurations gatsby-source-filesystem sont créées, pointant vers deux dossiers : posts et images . Posts stockera certains fichiers markdown (articles de blog) qui seront transformés avec gatsby-transformer-remark, et images stockera les images du blog et d’autres images que vous souhaitez optimiser.

N’oubliez pas de redémarrer votre serveur de développement local lorsque vous apportez des modifications au fichier gatsby-config.js.

Création d’articles de blog

Maintenant que nous avons configuré nos extensions, créez un dossier posts dans le répertoire src et créez deux fichiers Markdown avec le contenu suivant :

post-1.md :

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---

Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

Et post-2.md :

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---

Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

Ces fichiers Markdown contiennent des métadonnées sur les articles du blog, notamment des titres, des dates, des slugs, des descriptions et des chemins d’accès aux images.

Interroger Gatsby avec GraphQL

Gatsby utilise GraphQL pour interroger et récupérer les données de votre site web. GraphQL est un langage de requête puissant qui vous permet de demander exactement les données dont vous avez besoin, ce qui le rend efficace et flexible. Voyons comment interroger des données dans Gatsby à l’aide de GraphQL.

Lorsque vous exécutez gatsby develop dans votre terminal, vous remarquerez qu’en plus du lien gatsby-source-filesystem, qui ouvre votre projet sur le web, vous voyez également l’URL http://localhost:8000/___graphql. Cette URL permet d’accéder à l’éditeur GraphiQL pour votre projet Gatsby.

Lorsque vous ouvrez l’éditeur, vous voyez cette interface :

Vous pouvez interroger autant d’informations que vous le souhaitez sur votre site à partir de cet éditeur. Mais puisque vous avez créé des fichiers Markdown et effectué toutes les configurations dans le fichier gatsby-config.js. Interrogeons les fichiers Markdown et leur contenu en lançant la requête suivante dans l’éditeur :

query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}

Cette requête récupère les données de tous les fichiers Markdown à l’aide de allMarkdownRemark. Elle récupère les title, slug, et description du frontmatter de chaque fichier ainsi que leur id.

Après avoir rédigé votre requête, cliquez sur le bouton « Play » (une icône triangulaire orientée vers la droite) pour l’exécuter. Les résultats s’affichent dans la partie droite de l’éditeur.

Vous pouvez ensuite utiliser GraphQL pour interroger les données Markdown dans vos composants ou pages. Pour interroger ces données dans la page blog/index.js, commencez par importer graphql à partir de gatsby. Ensuite, au bas du code JSX, ajoutez ce qui suit :

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Dans le code ci-dessus, nous utilisons la balise graphql pour créer une requête GraphQL appelée query. Voici à quoi devrait ressembler votre fichier blog/index.js:

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';

const blog = ({ data }) => {
    const posts = data.allMarkdownRemark.nodes;
    return (
        <Layout>
            <div className={styles.blog_cont}>
                <h2>Blog</h2>
                <div className={styles.blog_grid}>
                    {posts.map((post) => (
                        <Link
                            to={`/blog/${post.frontmatter.slug}`}
                            className={styles.blog_card}
                            key={post.id}
                        >
                            <h3>{post.frontmatter.title}</h3>
                            <p>{post.frontmatter.description}</p>
                        </Link>
                    ))}
                </div>
            </div>
        </Layout>
    );
};
export default blog;

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Dans le code ci-dessus, vous accédez au résultat de query via la propriété data de votre composant. Ensuite, vous parcourez en boucle les données posts à l’aide de la méthode map() Et affichez les titres dans une liste.

Pour éviter les erreurs, créez un fichier blog.module.css dans le dossier styles et ajoutez le code suivant :

.blog_cont h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.blog_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width:700px) {
    .blog_grid {
        grid-template-columns: 1fr;
    }
}

.blog_card {
    background-color: #bfbfbf;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    transition: all .5s ease-in-out;
}

.blog_card:hover {
    background-color: #5333ed;
    color: #fff;
}

.blog_card h3 {
    margin-bottom: 15px;
}

.blog_card p {
    margin-bottom: 15px;
}

Comprendre les modèles et générer des pages dynamiques dans Gatsby avec GraphQL

Dans Gatsby, les modèles et les pages dynamiques sont des concepts essentiels qui vous permettent de créer des sites web flexibles et axés sur les données. Les modèles vous permettent de définir la structure et la présentation des pages, tandis que GraphQL vous aide à récupérer des données pour alimenter ces modèles de manière dynamique.

Création d’un modèle d’article de blog

Imaginons que vous souhaitiez créer un blog dont chaque article présente une structure cohérente, avec un titre et un contenu. Vous pouvez créer un modèle BlogDetails pour définir cette structure. Dans le dossier src, créez un dossier templates, puis créez un fichier blog-details.js:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = () => {

    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        className={styles.blog_featured}
                    />
                    <h3>Title</h3>
                    <div>
                        className={styles.html}
                        dangerouslySetInnerHTML={}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

Dans cet exemple, le modèle BlogDetails définit la structure des articles de blog individuels. Ensuite, nous allons utiliser GraphQL pour récupérer les données relatives à des articles de blog spécifiques et les transmettre à ce modèle en tant qu’éléments accessoires.

Générer des pages dynamiques

Pour générer des pages dynamiques, créez un fichier gatsby-node.js dans le répertoire racine de votre projet. Ce fichier vous permet de définir la manière dont les pages sont créées.

Dans votre fichier gatsby-node.js, utilisez GraphQL pour interroger les données que vous souhaitez utiliser pour les pages dynamiques. Par exemple, si vous avez des articles de blog en Markdown, vous pouvez interroger leurs slugs :

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query Articles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.nodes.forEach((node) => {
    actions.createPage({
      path: '/blog/' + node.frontmatter.slug,
      component: path.resolve('./src/templates/blog-details.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Dans cet exemple, nous interrogeons les slugs de tous les articles Markdown et créons des pages dynamiques pour chaque article à l’aide du modèle BlogDetails. L’objet contextuel est utilisé pour transmettre des données au modèle. Ces données (slug) sont utilisées par le modèle pour rechercher d’autres données qui s’alignent sur le slug.

Comprenons d’abord comment fonctionne l’optimisation des images dans Gatsby avant d’ajouter une requête GraphQL à la page du modèle.

Optimisation des images dans Gatsby

Plus tôt, vous avez installé et configuré les pages gatsby-transformer-sharp et gatsby-plugin-sharp ainsi que gatsby-source-filesystem pour la recherche d’images.

Avec ces extensions, vous pouvez interroger et optimiser les images avec GraphQL. Voici un exemple d’interrogation et d’affichage d’une image optimisée à l’aide de gatsby-plugin-sharp:

export const query = graphql`
  query {
    file(relativePath: { eq: "example.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

Dans le code ci-dessus, vous interrogez une image nommée example.jpg à partir de la source d’images et vous utilisez la propriété fluid de l’image interrogée pour l’afficher avec un rendu optimisé et responsive.

Vous pouvez ensuite importer Img à partir de gatsby-image pour travailler avec des images optimisées.

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const ImageExample = ({ data }) => {
  const { fluid } = data.file.childImageSharp;

  return (
    <div>
      <Img fluid={fluid} alt="Example Image" />
    </div>
  );
};

export default ImageExample;

Interrogation des pages dynamiques

Gatsby utilisera le modèle spécifié pour créer des pages individuelles pour chaque article de blog. Ajoutons maintenant une requête GraphQL à la page modèle pour récupérer les données basées sur le slug :

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = ({ data }) => {
    const { html } = data.markdownRemark;
    const { title, featureImg } = data.markdownRemark.frontmatter;
    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        fluid={featureImg.childImageSharp.fluid}
                        className={styles.blog_featured}
                    />
                    <h3>{title}</h3>
                    <div
                        className={styles.html}
                        dangerouslySetInnerHTML={{ __html: html }}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

export const query = graphql`
    query ProjectDetails($slug: String) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                featureImg {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`;

Dans le code ci-dessus, vous remarquerez que nous recherchons l’image optimisée et l’article de blog correspondant au mot-clé.

Vous pouvez consulter le code source complet de ce projet Gatsby sur GitHub.

Déployer des sites statiques Gatsby avec Kinsta

Kinsta vous permet d’héberger gratuitement jusqu’à 100 sites web statiques. Vous pouvez le faire en poussant votre code vers votre fournisseur Git préféré (Bitbucket, GitHub ou GitLab) et en le déployant ensuite sur Kinsta.

Une fois que votre répertoire est prêt, suivez les étapes suivantes pour déployer votre site statique sur Kinsta :

1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
2. Autorisez Kinsta avec votre fournisseur Git.
3. Cliquez sur Sites statiques dans la colonne latérale gauche, puis cliquez sur Ajouter un site.
4. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez effectuer le déploiement.
5. Attribuez un nom unique à votre site.
6. MyKinsta détectera automatiquement les paramètres de construction pour ce projet Gatsby. Vous verrez les réglages suivants pré-remplis :
   • Commande de construction : npm run build
   • Version Node : 18.16.0
   • Répertoire de publication : public

7. Enfin, cliquez sur Créer un site.

Et le tour est joué ! En quelques secondes, vous disposez d’un site déployé. Un lien est fourni pour accéder à la version déployée de votre site. Vous pourrez par la suite ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.

Comme alternative à l’hébergement de site statique, vous pouvez opter pour le déploiement de votre site statique avec l’hébergement d’application de Kinsta, qui offre une plus grande flexibilité d’hébergement, une plus large gamme d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker et des analyses complètes englobant des données en temps réel et historiques.

Résumé

Ce guide couvre les principes fondamentaux de l’approvisionnement en données, du routage, du stylisme, de l’optimisation des images, des extensions, du déploiement et bien plus encore.

La flexibilité, la vitesse et le riche écosystème de Gatsby en font un choix puissant pour la création de sites web statiques. Que vous créiez un blog personnel, un site de portfolio ou un site d’entreprise, Gatsby vous le fournit.

Il est maintenant temps de mettre vos connaissances en pratique et de commencer à créer votre propre site Gatsby. Avez-vous utilisé Gatsby pour créer quelque chose ? N’hésitez pas à partager vos projets et vos expériences avec nous dans la section des commentaires ci-dessous.