Introduction à la Construction de Sites Web avec Gatsby et WordPress (Rapide et Statique)

Comment fonctionne un site web dynamique typique, comme ceux basés sur WordPress ? Lorsqu’un visiteur saisi l’URL sur un navigateur ou visite votre site Web par un lien, une requête est envoyée à votre serveur Web.

Le serveur recueille les données nécessaires par le biais de requêtes de base de données et génère un fichier HTML que votre navigateur peut afficher. Les sites statiques, par contre, stockent sur le serveur ces réponses dans des fichiers qui sont instantanément livrés à un visiteur.

Les générateurs de sites statiques existent depuis longtemps, mais leur popularité a augmenté récemment. Dans ce guide pas à pas, nous examinons l’intégration de WordPress avec Gatsby, un générateur de site statique.

Qu’est-ce que Gatsby ?

WordPress crée des sites web dynamiques, qui nécessitent une pile de PHP, MySQL, et Apache ou Nginx sur le serveur pour fonctionner. Il est possible de créer une version statique de WordPress en générant une liste de pages HTML pour tout le contenu de votre site.

Cette version statique de WordPress est appelée WordPress headless ou serverless WordPress. Ce processus de conversion est effectué une seule fois afin que la même page puisse être servie plusieurs fois aux visiteurs. Comment convertir votre site WordPress en version statique ? C’est là que Gatsby entre en scène.

Gatsby, ou GatsbyJS, est un générateur de site statique construit avec ReactJS et alimenté par GraphQL. Gatsby permet à quiconque de créer des sites Web et des applications riches en fonctionnalités et attrayantes. Gatsby récupère des données pour votre site à partir de diverses sources, notamment des sites Web existants, des appels API et des fichiers via GraphQL, et construit le site statique en fonction des réglages de configuration que vous avez spécifiés.

Gatsby a été développé il y a seulement un an, mais un grand nombre d’utilisateurs essayent Gatsby. Gatsby a été accepté dans divers milieux. La page d’accueil du Airbnb’s Data Science and Engineering Blog est alimentée par Gatsby, bien que les articles actuels du blog soient hébergés sur Medium.

Braun est une marque de la société de biens de consommation P&G. Son site canadien est hébergé avec Gatsby, tandis que la fonction de recherche sur le site est assurée par React.

De plus, Gatsby a également suscité l’intérêt des développeurs indépendants pour leurs portfolios. Les portfolios comme celui de Jacob Castro ont un contenu essentiellement statique avec des liens vers les travaux et le contact par e-mail, ce qui fait qu’un site statique convient parfaitement à ses besoins.

Pourquoi Choisir Gatsby ?

Sites Web rapides : Le principal avantage de la construction d’un site statique avec Gatsby est la vitesse, que les webmasters ont essayé d’optimiser depuis l’annonce de Google d’utiliser la vitesse du site dans le classement de recherche web. Les temps de chargement affectent également les vues et les conversions des pages. On a estimé qu’un retard d’une seconde dans le temps de chargement du site peut entraîner une réduction de 7 % des conversions.

Sécurité : Vous obtenez également une sécurité supplémentaire avec un site statique. Comme c’est un tas de fichiers statiques qui sont servis, il n’y a pas grand-chose à pirater. De plus, vous pouvez toujours générer à nouveau les fichiers statiques s’ils sont perdus.

Coûts du serveur : L’hébergement d’un site dynamique nécessite que votre serveur soit compatible avec votre pile technologique. Si vous travaillez avec un site statique, vous pouvez l’héberger sur presque n’importe quel serveur, ce qui réduit aussi le coût associé à l’hébergement.

Générer le site statique avec Gatsby à chaque changement nécessite du JavaScript, ce qui peut aussi être fait sur une machine locale avant de transférer les fichiers statiques sur le site.

Pourquoi Éviter Gatsby ?

Pas de contenu dynamique : L’utilisation de Gatsby élimine la possibilité d’avoir n’importe quel type de contenu dynamique sur votre site. Les commentaires doivent être hébergés en externe par un service comme Disqus.

Les formulaires de contact devraient également être ré-acheminés par un partenaire externe comme Google Forms. En bref, vous perdriez le contrôle direct de ce contenu dynamique, car leurs réponses ne sont pas stockées sur vos serveurs.

Les constructions fréquentes ne sont pas pratiques : Les sites statiques ont également le problème des reconversions fréquentes. Tout changement que vous faites sur votre site n’est pris en compte qu’une fois que vous avez régénéré les pages et les avez rechargées sur le serveur.

Expertise technique : Gatsby est construit sur ReactJS et GraphQL. Une certaine connaissance de JavaScript et une idée de base de GraphQL sont donc nécessaires pour travailler avec et porter un site web sur Gatsby.

Les sites web statiques sont bons pour ceux qui recherchent une solution à faible coût, avec une haute sécurité. Certains cas d’utilisation sont des sites de portfolio pour les travailleurs indépendants et des sites de démonstration de produits.

Si vous pensez que les avantages l’emportent sur les inconvénients, tant mieux ! Nous allons maintenant essayer de mettre en place Gatsby pour l’intégrer à notre site WordPress.

La dernière version du site Gatsby que nous construisons dans ce tutoriel est disponible sur GitHub pour votre utilisation.

Étape 1 : Configuration de Gatsby

Dans cette section, nous allons voir comment installer Gatsby et créer un site statique de base avec Gatsby.

Conditions Préalables

La première étape pour démarrer avec Gatsby est de vérifier ses pré-requis. Gatsby est servi par npm, l’installateur de paquets de NodeJS. Par conséquent, vous avez besoin de NodeJS et de npm dans votre environnement avant d’installer Gatsby. De plus, Gatsby nécessite l’installation de Git, le système de gestion du code source.

Si vous êtes sous Windows, vous pouvez installer NodeJS et Git via le programme d’installation sur la page de téléchargement. Sur un Mac, vous pouvez soit télécharger leurs installateurs, soit utiliser homebrew.

brew install nodejs
brew install git

Si vous utilisez le système d’exploitation Linux, vous pouvez installer NodeJS via un installateur de paquets comme apt.

sudo apt update
sudo apt install nodejs git

Installer Gatsby

Une fois que vous avez bien installé NodeJS et Git, vous êtes prêt à installer Gatsby ! La façon la plus simple est d’exécuter la commande suivante sur le terminal (utilisez la ligne de commande npm sous Windows) :

npm install -g gatsby-cli

L’installateur installe d’abord les dépendances, puis Gatsby. Vous êtes maintenant prêt à créer votre premier site Gatsby.

Construisez et Déployez Votre Site Gatsby

Exécutez la commande suivante pour créer un site Gatsby.

gatsby new gatsby-wordpress

Gatsby crée un site dans le répertoire /gatsby-wordpress en clonant le modèle de démarrage de Gatsby. Vous pouvez fournir un modèle de démarrage différent à cloner. Une fois le clonage terminé et les dépendances installées, vous pouvez lancer une version de développement du site avec la commande suivante.

cd gatsby-wordpress
gatsby develop

Vous pouvez ensuite visiter la version de développement du site à l’adresse http://localhost:8000.

L’étape finale est de construire votre site statique. La commande suivante crée les fichiers statiques dans le répertoire public. Pour les téléverser sur un serveur, vous pouvez simplement téléverser le contenu de ce répertoire dans le répertoire racine du serveur. Vous pouvez ajouter un préfixe de chemin comme www.example.com/blog/ comme URL racine pour vos constructions (builds).

gatsby build

Pour démarrer un serveur HTML en local afin d’afficher cette forme statique de votre site Web, vous devez utiliser la commande serve. Soyez conscient que cela ne fonctionne qu’après avoir lancé la commande build.

gatsby serve

Maintenant que vous avez créé un site statique basique à partir de Gatsby, essayons de l’intégrer à WordPress.

Étape 2 : Comment Connecter Gatsby à WordPress

Dans cette section, vous allez intégrer votre site WordPress avec Gatsby. Vous devez indiquer à Gatsby l’adresse de votre blog WordPress pour lui permettre de récupérer les dernières données lorsque vous lancez le serveur de développement ou que vous générez les pages statiques.

Le processus de connexion de Gatsby à WordPress consiste à récupérer vos données WordPress, ce qui est déclenché par un build. Une fois que Gatsby a récupéré les données WordPress, il crée le site statique basé sur le modèle actuel.

Le processus utilise le site WordPress comme une source pour les articles sur Gatsby. Pour faciliter cet échange, vous devez installer l’extension de Gatsby pour WordPress avec la commande suivante :

npm install gatsby-source-wordpress

Configurer Gatsby

Ensuite, ajoutez cette extension au fichier de configuration de Gatsby gatsby-config.js.

Ensuite, ajoutez le code suivant au fichier pour connecter Gatsby à votre source WordPress. Dans cet exemple, nous utilisons un site WordPress hébergé localement sur MAMP. D’autre part, vous pouvez modifier le titre et la description du site dans les métadonnées du site.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Récupération des Articles avec GraphQL

Une fois que vous avez spécifié la source du site WordPress dans votre fichier de configuration, vous devez spécifier quelles données doivent être extraites du site WordPress. Gatsby utilise GraphQL, un langage de requête open source pour les API, pour obtenir en masse des articles WordPress.

Avant de finaliser les requêtes à sélectionner, vous pouvez sélectionner de manière interactive le contenu que vous devez aller chercher dans WordPress. Lancez le serveur de développement et allez à l’URL : http://localhost:8000/___graphql pour ouvrir l’éditeur GraphQL.

Lorsque vous avez finalisé le contenu à tirer, vous pouvez ajouter les requêtes GraphQL au fichier index.js.

Récupérons seulement le titre et l’extrait de chaque article pour l’instant. Nous pouvons ajouter d’autres champs plus tard.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Lorsque vous consultez le site de développement, vous remarquerez que tous les articles de WordPress ont été extraits avec leurs titres et extraits affichés :

Bien que cela n’ait pas l’air très joli, vous avez réussi à extraire les données pertinentes de WordPress. L’étape suivante consiste à créer une nouvelle page pour chaque article.

Étape 3 : Créer un Modèle de Page Basique

Dans cette section, vous allez demander à Gatsby de créer un article pour chaque page de votre site WordPress et d’inclure des liens vers ces articles via le slug.

Créer une Page pour Chaque Article

La première étape après avoir extrait tous les articles de la source WordPress est de demander à Gatsby de créer une page pour chaque article. C’est une action qui est complétée en utilisant l’action createPage.

Ajoutez le code suivant à gatsby-node.js. Notez que nous récupérons en plus le contenu, l’auteur, la date et le slug de chaque article :

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: {fields: [date]}) {
        edges {
          node {
            title
            excerpt
            slug
            date(formatString: "MM-DD-YYYY")
            author {
              name
            }
          }
        }
      }
    }

  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        // Decide URL structure
        path: node.slug,
        // path to template
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug,
        },
      })
    })
  })

Après avoir extrait les données de GraphQL, le code crée une page pour chaque article. Dans l’article, vous pouvez spécifier la structure de l’URL de la page basée sur le slug en utilisant le chemin d’accès.

Vous pouvez également obtenir l’ID de l’article et le spécifier dans l’URL. La variable composante pointe vers le modèle à travers lequel l’enregistrement doit être rendu. Enfin, nous passons le slug comme contexte du modèle. Ceci est nécessaire pour que le modèle puisse rechercher le bon article dans la liste des articles récupérés.

Idéalement, vous devriez passer une variable qui identifie de manière unique un article comme le contexte.

Redémarrez le serveur de développement après avoir apporté des modifications au fichier gatsby-node.js pour que les modifications prennent effet.

Création d’un Modèle pour l’Affichage d’un Article

Créez un modèle de répertoire dans le répertoire src. Créez un nouveau fichier blog-post.js dans le répertoire des modèles et saisissez le code suivant :

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.allWordpressPost.edges[0].node
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <p> By: {post.author.name} </p>
        <p> On: {post.date} </p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    allWordpressPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          title
          content
          slug
          date(formatString: "MM-DD-YYYY")
          author {
            name
          }
        }
      }
    }
  }

La requête GraphQL obtient la date et le nom de l’auteur, qui est affiché vers la fin de l’article. Vous pouvez obtenir des champs supplémentaires en utilisant l’éditeur GraphQL et les afficher sur la page de l’article.

Lien vers les Pages de l’Index

Vous avez créé une nouvelle page pour chaque article. Cependant, vous devez ajouter un lien vers ces articles à partir de la page d’index. Allez sur index.js et modifiez le code pour ajouter un lien à chaque article :

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

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <Link to={node.slug}>
            <p>{node.title}</p>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }

Voici l’état de la page d’index :

En cliquant sur un lien vers un article, voici la page d’un article de blog, rendue par blog-post.js :

Étape 4 : Tâches de Migration Avancées

Bien que vous ayez importé avec succès tous les articles WordPress, nous allons effectuer quelques tâches avancées pour nous assurer que vous ne rencontrerez pas de problèmes à l’avenir. Dans cette section, vous pouvez travailler efficacement avec des images et ajouter le dernier horodatage modifié à vos données.

Conversions de Chemins d’Images

Un de nos premiers articles, « Post with Image! » contenait une image. Si vous vous déplacez vers la page correspondante sur Gatsby, vous remarquerez que l’image est affichée, mais que la source de l’image est la même que celle de WordPress. Dans cet exemple, elle pointe vers l’image WordPress hébergée localement.

Si vous hébergez des images en externe, cela ne posera pas de problème car vous continuerez à pointer vers votre serveur d’images. Cependant, si vous stockez les images dans votre installation WordPress, vous devrez aussi récupérer les images avec les articles !

Ceci est traité par l’extension inline images. Tout d’abord, installez
gatsby-image et ensuite l’extension gatsby-wordpress-inline-images.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

Ensuite, ajoutez les lignes suivantes à votre fichier gatsby-config.js.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

Le redémarrage du serveur de développement après avoir effectué ces changements permettra de télécharger les images du site WordPress et de les stocker localement. Vous pouvez le vérifier à partir du chemin de la même image.

Afficher la Date de Dernière Modification

Si vous gérez un blog où vous mettez régulièrement à jour vos articles, vous pouvez souhaiter informer les lecteurs de la dernière mise à jour d’un article. Bien que vous ayez récupéré plus tôt la « date de création » dans la requête GraphQL, cette section vous indique comment tirer aussi la date de « dernière modification ».

Pour ajouter la date de dernière modification de WordPress à votre article Gatsby, vous devez ajouter le champ modifié à la liste des éléments de votre requête GraphQL. C’est un horodatage comme la date, donc vous devez aussi ajouter le paramètre formatString. Voici le fichier blog-post.js modifié :

...
<Layout>
  <div>
    ...
    <p> On: {post.date} </p>
    <p> Last modified: {post.modified} </p>
  </div>
</Layout>
...

export const query = graphql`
  query($slug: String!) {
  {
    allWordpressPost {
      edges {
        node {
          ...
          modified(formatString: "MM-DD-YYYY")
        }
      }
    }
  }

Une fois que vous l’aurez ajouté, vous pourrez voir l’horodatage de dernière modification sur la page du blog sur Gatsby :

Comment déployer votre site Gatsby chez Kinsta

En plus de l’hébergement WordPress, Kinsta propose l’hébergement d’applications, l’hébergement de bases de données et l’hébergement de sites statiques. Vous pouvez héberger jusqu’à 100 sites statiques gratuitement !

Pour déployer votre site avec l’hébergement de site statique, commencez par pousser votre code vers un fournisseur Git préféré (Bitbucket, GitHub ou GitLab), puis suivez les étapes suivantes pour le déployer :

1. 1. Connectez-vous ou créez un compte pour voir votre tableau de bord MyKinsta.
   2. Autorisez Kinsta avec votre fournisseur Git.
   3. Cliquez sur Sites statiques dans la colonne latérale de gauche, puis 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. Ajoutez les réglages de construction dans le format suivant :
      • Commande de construction : npm run build
      • Version de Node : 18.16.0
      • Répertoire de publication : public
   7. Enfin, cliquez sur Créer un site.

Résumé

Prendre la décision de convertir votre site WordPress en un site statique en profitant de Gatsby peut être une tâche difficile. Pour ce faire, vous devez exécuter les étapes suivantes :

• Installer Gatsby pour construire un site de démarrage
• Connecter Gatsby au WordPress source via GraphQL
• Créer des modèles pour les articles de blog
• Importez toutes vos images depuis WordPress
• Afficher l’horodatage de dernière modification de WordPress

Maintenant, à votre tour : Avez-vous joué avec Gatsby ? Quelle est votre expérience en la matière ? Dites-le nous dans les commentaires !

Shaumik Daityari

Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!