Comment Créer un Site Web avec Gatsby et WordPress (en 8 Étapes)

En passant à une configuration headless WordPress, vous pouvez avoir plus de contrôle sur votre contenu en ligne. Cependant, il est également impératif de créer un front-end pour votre site internet. Pour ce faire, vous pouvez créer un site WordPress Gatsby.

En utilisant Gatsby, vous pouvez mettre en place une version statique de votre site internet WordPress. Il peut améliorer efficacement la rapidité de diffusion de votre contenu et la sécurité du site. En conséquence, votre site internet peut bénéficier d’un meilleur classement sur les moteurs de recherche, d’une expérience utilisateur plus performante et de taux de conversion plus élevés.

Dans cet article, nous expliquerons ce qu’est Gatsby et les avantages de l’intégrer à WordPress. Ensuite, nous vous montrerons comment créer un site internet WordPress sous Gatsby. Commençons sans plus attendre !

Une introduction à Gatsby

Lorsque vous commencez à vous servir de WordPress, vous créez à cet effet un site internet dynamique. Votre serveur générera un fichier HTML unique basé sur la demande chaque fois que quelqu’un visitera votre site.

Essentiellement, les sites web dynamiques tels que WordPress utilisent le rendu côté navigateur. Vos pages web peuvent se charger différemment en fonction du comportement de l’utilisateur, du fuseau horaire ou de l’emplacement.

Alternativement, vous pouvez créer un site internet statique. Grâce au codage HTML, CSS et JavaScript prédéfini, les pages web statiques resteront les mêmes à chaque chargement de page.

La conversion de votre site en une version statique s’appelle un serverless site ou un site WordPress headless. Au cours de ce processus, vous devrez générer des pages HTML pour chaque élément de contenu de votre site. Pour ce faire, vous pouvez utiliser un générateur de site statique comme Gatsby.

Gatsby est un générateur de site statique open source basé sur React.JS, GraphQL et Webpack. Ce framework vous permet de créer un site internet statique avec React et des données sources de votre base de données WordPress.

Essentiellement, Gatsby récupérera des données et affichera du contenu à partir de nombreuses sources différentes. Ceux-ci peuvent inclure des données de sites web existants, des appels d’API comme REST ou des fichiers plats via GraphQL. Gatsby construira ensuite votre site statique en fonction des options de configuration.

Gatsby n’existe pas depuis aussi longtemps que d’autres générateurs de sites statiques. Cependant, il a rapidement acquis une popularité grandissante. Ainsi, il est devenu actuellement la plateforme préférée de nombreux sites web. Un exemple populaire de Gatsby est représenté par le blog d’Airbnb pour les ingénieurs et les analystes de données.

Cependant, vous pensez peut-être que WordPress est un système de gestion de contenu (CMS) plus performant et plus efficace que certaines des autres alternatives WordPress. Ainsi, pour savoir si Gatsby vous convient, discutons des avantages, des inconvénients et des cas d’utilisation de ce générateur de sites statiques.

Avantages de l’utilisation de Gatsby

Le temps de chargement des pages est probablement l’une de vos principales préoccupations, que vous soyez propriétaire ou développeur d’un site internet. Étant donné que la vitesse des pages peut avoir un impact sur les classements de recherche et l’expérience utilisateur, vous devrez trouver différentes façons d’accélérer votre site web afin d’avoir la meilleure performance possible.

L’un des principaux avantages de Gatsby est sa vitesse de chargement rapide. Les sites web statiques peuvent généralement traiter les demandes plus vite que les sites dynamiques. Avec Gatsby, vous pouvez rapidement rechercher, compiler et créer du contenu.

Gatsby propose une génération statique différée, un rendu de page intelligent et des fichiers de site statiques. Ces optimisations des performances peuvent améliorer la vitesse de votre page, le trafic SEO et le taux de conversion.

Les sites web statiques peuvent également être plus sécurisés. Lorsque vous avez des fichiers générés statiquement, il y aura moins de vulnérabilités. Ce niveau de sécurité rend difficile l’exploitation de votre site par les pirates.

Si vous avez un site internet dynamique, votre serveur doit être compatible avec votre structure technologique. Cependant, les sites statiques Gatsby peuvent être hébergés sur n’importe quel serveur. Comme vous n’avez pas besoin d’un serveur spécialisé, vous pouvez potentiellement trouver une solution d’hébergement plus rentable.

Cas d’utilisation de Gatsby

En général, Gatsby peut être un outil utile pour quiconque souhaite créer un site internet statique. C’est souvent la meilleure option pour les sites qui ne nécessitent pas de changements fréquents. Cela étant, nous allons voir certains cas d’utilisation spécifiques afin de vous aider à comprendre si Gatsby représente le bon choix pour votre site.

Comme nous l’avons mentionné précédemment, les sites web statiques sont supérieurs en termes de vitesse. Pour les entreprises de commerce électronique, il s’agit d’un facteur essentiel à prendre en compte. Étant donné que Gatsby peut réduire le temps de chargement de votre page, c’est une option efficace pour optimiser le taux de conversion.

Gatsby propose plus de 2 500 plugins pour créer facilement un site internet avec les fonctionnalités appropriées. Que votre créneau soit dans les produits de luxe, la décoration intérieure ou les vêtements, vous pouvez créer un site WordPress Gatsby avec des fonctionnalités interactives de haute qualité.

L’architecture de Gatsby ne nécessite pas de serveur. Cette configuration peut permettre à votre site de gérer une grande quantité de trafic. C’est quelque chose de très facile à mettre en place. Tant que votre réseau de diffusion de contenu (CDN) fonctionne correctement, vous ne devriez pas subir de temps d’arrêt.

En tant que créateur de contenu, vous souhaiterez probablement inclure un certain nombre de photos sur votre site internet. Heureusement, Gatsby peut optimiser les images pour un affichage rapide. Cette méthode d’optimisation évite de trop solliciter les ressources de votre serveur.

Voici quelques autres niches de sites web qui peuvent bénéficier de l’utilisation de Gatsby :

• Finance et assurance des consommateurs
• Organismes d’intérêt public
• Développement web et WordPress
• Marketing
• Logiciels et SaaS

En fin de compte, Gatsby est un outil flexible qui peut générer de nombreux types de sites web statiques. Quel que soit le type de contenu que vous créez, Gatsby peut optimiser efficacement la livraison de vos fichiers afin de maximiser la vitesse et l’expérience utilisateur.

Inconvénients de l’utilisation de Gatsby

Bien que Gatsby offre de nombreux avantages, il n’est pas offert pour tout le monde. Comme la plateforme est construite sur WordPress React, vous devrez donc vous familiariser avec JavaScript. Vous devrez également utiliser GraphQL pour créer et manipuler des requêtes.

Il est aussi important de se rappeler que Gatsby ne sert que de fichiers statiques. Cela signifie que vous devrez reconsidérer la façon d’utiliser le contenu dynamique.

Souvent, le contenu dynamique est une partie nécessaire de votre site internet. Ainsi, il se peut que vous ayez  peut-être besoin  d’afficher des formulaires de contact avec des champs personnalisés. En outre, vous aimerez aussi probablement encourager l’engagement des utilisateurs dans les sections de Commentaires.

Vous devrez trouver un service tiers pour fournir ces éléments dynamiques. Par exemple, une plateforme externe telle que Google Forms peut gérer n’importe quel formulaire de contact. Vous pouvez aussi héberger des commentaires avec Disqus. Cependant, avec l’une ou l’autre de ces options, vous ne pourrez pas contrôler directement votre contenu dynamique.

Enfin, vous serez confronté à un délai chaque fois que vous modifierez un élément sur votre site statique. Avec un CMS à l’instar de WordPress, vous pouvez voir tout changement instantanément. Cependant, vous devrez attendre au moins une minute avec Gatsby en raison de la façon dont il pré-rend le contenu.

À quel point Gatsby est-il difficile à apprendre ?

Vous pouvez faire face à une courbe d’apprentissage abrupte lorsque vous utilisez Gatsby pour la première fois en tant que débutant. La gestion de HTML, CSS, JavaScript et de la ligne de commande peut être difficile si vous débutez dans le développement WordPress.

Cependant, si vous connaissez ces compétences de base en développement WordPress, vous pouvez facilement apprendre Gatsby. Cela implique de gérer React.js, qui est une bibliothèque JavaScript. Si vous connaissez déjà l’écriture en JavaScript, vous aurez plus de facilité au cours de ce processus.

De plus, vous pouvez styliser votre site internet Gatsby WordPress avec HTML et CSS. Étant donné que ces langages de codage sont relativement faciles à apprendre et à utiliser, Gatsby ne devrait pas vous décourager.

Gatsby fournit également beaucoup de documentation et de tutoriels pratiques. Même si vous êtes débutant, vous pouvez rapidement apprendre tout ce dont vous avez besoin pour créer un site internet statique avec WordPress et Gatsby.

De plus, Gatsby est un projet open source, les développeurs peuvent donc améliorer constamment ces ressources.

Comment créer un site internet avec WordPress et Gatsby (en 8 étapes) ?

Il est maintenant temps d’apprendre comment créer un site internet avec WordPress et Gatsby. Ensuite, vous pouvez servir votre site internet sous forme de fichiers statiques. De ce fait, vous pouvez améliorer facilement le temps de chargement tout en offrant une expérience utilisateur enrichie. Au lieu d’utiliser un thème WordPress Gatsby, nous vous montrerons comment effectuer ce processus à partir de zéro.

Étape 1 – Créer un site internet WordPress

En utilisant Gatsby, vous pouvez livrer votre site WordPress sous forme de contenu statique. Pour commencer ce processus, vous devrez installer WordPress qui servira de source de données pour Gatsby. Il peut s’agir d’un site internet existant, d’une nouvelle installation ou d’un environnement local.

Vous devrez d’abord trouver un service d’hébergement web compatible, car un fournisseur d’hébergement fournira l’espace serveur pour votre nouveau site internet. Au cours de ce processus, vous devriez pouvoir créer un nom de domaine et installer WordPress au même endroit.

Chez Hostinger, nous proposons certains des plans d’hébergement disponibles les plus rentables. Si vous recherchez un serveur optimisé pour WordPress de haute qualité, vous ne pouvez pas vous tromper avec notre hébergement WordPress. Nos plans commencent à partir de €1.49 /mois seulement.

Après avoir acheté un plan, vous devrez choisir un domaine et installer WordPress. En vous connectant à votre compte hPanel, vous pouvez voir les détails relatifs à votre plan.

Cliquez sur le bouton Tableau de bord. Cela ouvrira votre Tableau de bord d’administration WordPress que vous utiliserez pour administrer le back-end de votre site internet.

Étape 2 – Installer les plugins Gatsby

Vous devrez installer et activer quelques plugins WordPress pour la prochaine étape. Premièrement, WPGraphQL est un outil gratuit et open-source qui activera l’API GraphQL dans WordPress. Ce plugin configurera WordPress en tant que source de données et permettra à ces données d’être interrogées par GraphQL.

Dirigez-vous vers Extensions -> Ajouter dans votre Tableau de bord WordPress pour installer le plugin. Ensuite, recherchez « WPGraphQL« . Une fois que vous avez trouvé le plugin, installez-le et activez-le.

Le deuxième plugin que vous aurez à télécharger est WPGatsby. Cet outil gardera votre site internet WordPress synchronisé avec Gatsby. Il peut également vous permettre de remplacer l’aperçu de WordPress par le front-end de Gatsby.

Après avoir activé ces deux plugins, allez dans GraphQL -> Settings. Ici, trouvez le point de terminaison GraphQL ( GraphQL Endpoint ).

Vous devriez voir un chemin de point de terminaison pour l’API GraphQL sur votre site. Comme vous aurez besoin de ces informations plus tard, assurez-vous de copier l’URL.

Avant de commencer avec Gatsby, vous pourriez envisager de changer votre permalien WordPress. Pour obtenir les meilleurs résultats avec WPGraphQL, vous devrez éviter d’utiliser la structure de permalien simple.

Vous pouvez mettre à jour votre structure de permaliens en sélectionnant Réglages -> Permaliens. Sous Réglages les plus courants, choisissez une option autre que Simple.

Assurez-vous d’enregistrer vos modifications. Après cela, ouvrez la ligne de commande et testez la connexion entre WordPress et GraphQL à l’aide de la commande ci-dessous :

curl --location --request POST 'https://your_domain/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
    "query": "query { posts { nodes { title } } }"
}'

Cela envoie une requête au point de terminaison GraphQL de votre site web. Vous recevrez une réponse JSON à la requête listant les titres des articles de votre site si celui-ci fonctionne correctement.

Étape 3 – Installer Gatsby

Avant d’installer Gatsby, vous devez vous assurer que vous remplissez les conditions préalables requises. Étant donné que Gatsby est servi via le Node Package Manager (NPM), vous devrez installer à la fois NodeJS et npm. De plus, Git sera aussi nécessaire pour gérer le code.

Pour télécharger Git et NodeJS, vous pouvez utiliser un installateur de package. Pour les utilisateurs de Mac, commencez par installer Homebrew, un gestionnaire de paquets manquant pour macOS.

Dans le terminal de commande, saisissez la commande suivante pour installer et configurer Homebrew :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"  

Une fois Homebrew installé, vous pouvez utiliser les commandes suivantes pour installer à la fois NodeJS et Git :

brew install nodejs
brew install git

Si vous avez un ordinateur Windows, rendez-vous sur les pages de téléchargement de Git et NodeJS. Choisissez la version Windows et téléchargez les deux packages.

Pour les systèmes d’exploitation Linux, vous pouvez utiliser un programme d’installation de package comme apt. Pour installer le logiciel nécessaire, utilisez ces commandes :

sudo apt update
sudo apt install nodejs git

Vous devez maintenant remplir les conditions requises pour installer Gatsby. Pour cela, lancez la commande suivante dans votre terminal logiciel :

npm install -g gatsby-cli

Cela lancera automatiquement le programme d’installation de Gatsby. Vous remarquerez qu’il téléchargera et installera toutes les dépendances nécessaires, puis Gatsby lui-même.

Étape 4 – Créer un site Gatsby

Une fois le processus d’installation de Gatsby terminé, vous serez prêt à créer votre premier site internet Gatsby WordPress. Pour commencer, entrez simplement la commande suivante

gatsby new gatsby-site

Cela clonera le modèle de démarrage par défaut et le placera dans le répertoire /gatsby-site. Une fois terminé, votre site Gatsby sera démarré. Ensuite, vous pouvez ouvrir la version de développement avec cette commande :

cd gatsby-site
gatsby develop

Après cela, le terminal de commande vous indiquera que vous pouvez visiter votre nouveau site internet local. Ouvrez un navigateur web et visitez http://localhost:8000/. Cela vous permettra de visualiser le front-end Gatsby de votre site.

Vous pouvez commencer à créer votre site statique si vous ne voyez aucune erreur. Ce processus implique la création des fichiers dans le répertoire public. Pour le faire automatiquement, entrez la commande suivante :

gatsby build

Enfin, vous pouvez démarrer un serveur HTML local pour afficher votre nouveau site internet. Toutefois, il faut noter que cela ne réussira qu’après l’exécution de la commande build :

gatsby serve

Cela permettra de configurer avec succès un site Gatsby statique basique.

Étape 5 – Connecter WordPress et configurer Gatsby

Maintenant que vous avez un site internet statique par défaut, il est temps de l’intégrer à WordPress. Pour cette étape, vous dirigez Gatsby vers l’adresse de votre site WordPress. Cela extrait les dernières données de votre site internet lorsque vous exécutez ce serveur de développement.

Tout d’abord, installez le plugin Gatsby WordPress. Vous pouvez le faire en exécutant la commande suivante :

npm install gatsby-source-wordpress

Ensuite, utilisez votre éditeur de texte préféré pour ouvrir le fichier gatsby-config.js. Il représente le fichier de configuration par défaut pour Gatsby. Pour connecter Gatsby à une source WordPress, ajoutez ce code :

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

N’oubliez pas de remplacer « example.com » par le point de terminaison GraphQL que vous avez copié précédemment. Si vous utilisez un site hébergé localement, vous pouvez utiliser « localhost:8888/wordpress » pour remplacer l’URL de votre site.

Étape 6 – Personnaliser les fichiers de modèle par défaut

Lorsque vous installez Gatsby, il inclura un modèle de démarrage de base. Celui-ci contient quelques fichiers source de base avec des fonctionnalités par défaut. Pour personnaliser votre site internet, il est important de connaître les fichiers modèles essentiels :

• ./gasby-node.js – contient le code permettant de lancer une requête à WordPress pour extraire votre contenu, puis générer le résultat statique. En éditant ce fichier, vous pouvez modifier le contenu affiché sur votre site internet. Si vous êtes familier avec le développement WordPress, ce processus est similaire à la modification de la boucle.

• ./src/templates – fichiers de modèles individuels qui contiennent et exportent un composant React. Comme ils sont responsables du rendu du contenu, ces fichiers jouent un rôle essentiel dans la modification de l’apparence de votre site. Ils sont similaires aux fichiers de modèles WordPress.
• ./src/components – chaque fichier de ce dossier contient un composant React qui exécute une tâche d’interface utilisateur spécifique. Plutôt que des modèles, ce sont des blocs de construction d’interface utilisateur. Vous pouvez coller le code dans ce dossier si vous souhaitez partager un élément d’interface utilisateur sur plusieurs fichiers de modèle. Dans WordPress, il s’agirait de template partials.
• ./src/css – se compose de fichiers CSS partagés sur le site internet, similaires au fichier style.css dans WordPress.

Maintenant que vous comprenez le fonctionnement de ces fichiers, il est temps d’ajouter vos personnalisations.

Afficher un extrait d’article

Sur votre site WordPress, vos articles de blog contiennent des extraits qui sont des résumés de chaque article. Cependant, Gatsby tirera un extrait principalement à des fins d’optimisation des moteurs de recherche (SEO). Il mettra l’extrait dans la méta description.

Vous souhaiterez peut-être personnaliser l’affichage de vos articles de blog sur votre site internet statique. Pour ce faire, vous pouvez ouvrir le fichier ./src/templates/blog-post.js.

Pour commencer à afficher des extraits d’articles de blog, ajoutez le code en surbrillance à votre fichier de modèle :

const BlogPostTemplate = ({ data: { previous, next, post } }) => {
	...
	return (
		<Layout>
			...
			<h1 itemProp="headline">{parse(post.title)}</h1>
      
			<p>{post.date}</p>

			{/* Checking for and adding the post excerpt if the current post has one*/}
			{post.excerpt && (
				<div className="post-excerpt">{parse(post.excerpt)}</div>
			)}

      {/* if we have a featured image for this post let's display it */}
        {featuredImage?.fluid && (
          <Image
            fluid={featuredImage.fluid}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
          />
        )}
      ...
		</Layout>
	)
}

Gatsby vérifiera automatiquement si l’article contient un extrait. Si c’est le cas, il l’affichera sous forme de contenu textuel dans un élément <div>. Une fois que vous avez fini de modifier ce fichier, enregistrez vos modifications.

Ajouter un CSS personnalisé

Vous voudrez peut-être ajouter des effets visuels lors de la personnalisation de votre site Gatsby. Avec le CSS personnalisé, vous pouvez mettre en évidence certains éléments sur la page pour les rendre plus faciles à trouver.

Par exemple, supposons que vous souhaitiez inclure un effet d’ombre autour de votre extrait d’article. Pour ce faire, vous devrez ouvrir le fichier ./src/css/style.css dans un éditeur de texte. Ensuite, vous pouvez coller le code suivant pour personnaliser votre propriété box-shadow :

.post-list-item header {
  margin-bottom: var(--spacing-4);
}

/* CSS targeting your new post excerpt element */
.post-excerpt {
  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.post-excerpt p {
  margin-bottom: 0px;
}

Ce code créera une ombre autour du conteneur d’extrait, le rendant plus attrayant. Vous pouvez également spécifier un niveau unique de remplissage, des bords arrondis et d’espacement.

Lorsque vous êtes satisfait de vos modifications, enregistrez le fichier. Ensuite, vous pouvez visiter votre site Gatsby pour voir les effets ajoutés.

Étape 7 – Créer un modèle de page

À l’étape précédente, vous avez configuré un modèle existant pour rendre vos articles de blog sous forme de fichiers Gatsby statiques. Vous pouvez également créer un modèle de base pour chaque page de votre site internet WordPress Gatsby. Une fois que vous aurez codé le modèle de conception, Gatsby générera automatiquement une publication pour chacune de vos pages WordPress.

Pour ce faire, vous pouvez utiliser l’action createPage. Tout d’abord, ouvrez le fichier gatsby-node.js et ajoutez ce nouveau code :

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // query content for WordPress posts
  const result = await graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)
  const postTemplate = path.resolve(`./src/templates/post.js`)
  result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
      // will be the url for the page
      path: edge.node.slug,
      // specify the component template of your choice
      component: slash(postTemplate),
      // In the ^template's GraphQL query, 'id' will be available
      // as a GraphQL variable to query for this post's data.
      context: {
        id: edge.node.id,
      },
    })
  })
} 

Cela va extraire efficacement les données de GraphQL, générant une page pour chaque article WordPress. Ensuite, vous pouvez utiliser la commande develop pour accéder aux nouvelles pages de Gatsby.

Vous pouvez également créer un modèle de répertoire. Vous devrez ouvrir le dossier des modèles et trouver le fichier blog-post.js. Ici, ajoutez 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
          }
        }
      }
    }
  }

Lorsque vous devez ajouter des liens vers ces nouvelles pages, dirigez-vous vers le fichier index.js. Ensuite, collez le code suivant :

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
        }
      }
    }
  }

En faisant cela, ajoutez des liens vers chaque article dans le code. Après avoir enregistré vos modifications, vous disposerez d’une page d’index contenant des liens vers tous les articles de votre blog.

Étape 8 – Effectuer des tâches de migration supplémentaires

Une fois que vous avez réussi à importer tous vos articles WordPress dans Gatsby, vous pouvez commencer à profiter des avantages de votre nouveau site statique. Cependant, vous voudrez peut-être envisager de prendre quelques précautions supplémentaires afin d’éviter certains problèmes dans le futur.

Stocker les images localement

Bien que vos articles puissent s’afficher correctement dans Gatsby, les images pourraient pointer vers WordPress. Dans ce cas, vous souhaiteriez que vos images puissent être hébergées sur Gatsby. N’oubliez pas que vous n’aurez pas ce problème si vous hébergez des images en externe.

Dans Gatsby, vous pouvez éviter de diffuser des images WordPress avec le plugin Inline Images. Pour installer cet outil, saisissez les deux commandes :

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

Ensuite, ouvrez votre fichier gatsby-config.js. Ici, ajoutez le code suivant :

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`
            }
          }
        ]
      }
    }
  ],
}

Après cela, enregistrez vos modifications. Ensuite, redémarrez votre serveur de développement, qui téléchargera vos images WordPress et les stockera localement.

Afficher la date de dernière modification d’un article

En utilisant les requêtes GraphQL, vous avez probablement déjà extrait les dates de création de vos articles de blog. Cependant, vous pouvez également envisager d’afficher un horodatage de « dernière modification« . Il peut informer vos lecteurs qu’ils lisent un contenu à jour.

Ajouter une date de « dernière modification » à vos articles Gatsby est simple. Dans une requête GraphQL, insérez ce code dans votre fichier blog-post.js :

...
<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")
        }
      }
    }
  }

Cela mettra à jour votre article de blog avec un nouvel horodatage « dernière modification ». Maintenant, votre site internet WordPress sous Gatsby est prêt à fonctionner !

Conclusion

Avec Gatsby, vous pouvez convertir votre site web WordPress en fichiers statiques. Bien que cette configuration nécessite des connaissances en codage JavaScript et GraphQL, Gatsby peut offrir plus de flexibilité pour sécuriser et faire évoluer votre contenu en ligne.

Pour récapituler, voici comment créer un site web avec Gatsby et WordPress à partir de zéro, sans utiliser des thèmes WordPress Gatsby :

1. Créez un site web WordPress.
2. Installez les plugins Gatsby WPGraphQL et WPGatsby.
3. Installez Gatsby.
4. Créez un site Gatsby.
5. Connectez WordPress et configurez Gatsby.
6. Personnalisez les fichiers de modèle par défaut.
7. Créez un modèle de page.
8. Effectuez des tâches de migration supplémentaires.

Vous devriez maintenant être parfaitement préparé à transférer votre contenu vers un site WordPress Gatsby !