Tutoriel : Créez votre site avec WordPress et Gatsby

Créer un site Web statique avec WordPress est possible avec WordPress sans tête. Ces types de sites Web se chargent plus rapidement, car les fichiers statiques sont enregistrés sur votre serveur. La question est de savoir comment créer un site Web sans tête avec WordPress ?

C'est là qu'intervient un générateur de site statique comme Gatsby. Ces générateurs vous aident à créer des sites Web statiques riches en fonctionnalités dans WordPress. Cependant, vous devez les intégrer correctement à votre installation WordPress pour en tirer le meilleur parti. Cette intégration comprend l'installation, la génération et la configuration de WordPress Gatsby.

Dans cet article, nous verrons ce qu'est Gatsby et pourquoi vous voudrez peut-être l'utiliser avec WordPress. Nous détaillerons ensuite comment utiliser Gatsby et si vous devriez. Commençons!

Qu'est-ce que Gatsby ?

En termes simples, Gatsby est un générateur de site statique. Cela signifie que Gatsby génère les fichiers HTML statiques qui sont téléchargés sur le serveur de votre site Web. Lorsqu'un visiteur atterrit sur votre site, ces fichiers statiques sont servis à son navigateur, au lieu du contenu dynamique que WordPress propose généralement.

Pour générer ces fichiers, Gatsby récupère les données de votre site Web à partir de diverses sources. Cela inclut les sites Web existants, les appels d'API et les fichiers plats via GraphQL. Votre site Web statique est ensuite construit en fonction des configurations que vous avez définies.

Comparé à d'autres générateurs de sites statiques, Gatsby est relativement nouveau. Cependant, cela n'a pas empêché de nombreuses entreprises de l'essayer. L'un des plus grands exemples est le blog Airbnb Engineering & Data Science, qui est propulsé par Gatsby.

Pourquoi utiliser Gatsby avec WordPress ?

Comme il est possible de créer un site Web statique avec WordPress, vous vous demandez peut-être pourquoi vous devriez utiliser WordPress et Gatsby ensemble. Bien que WordPress soit puissant en soi, Gatsby offre certains avantages que vous pourriez souhaiter pour votre site Web, notamment des vitesses plus rapides et des coûts de serveur réduits. Comprendre les avantages et les inconvénients de Gatsby peut vous aider à prendre une décision éclairée.

Avantages de l'utilisation de Gatsby

Gatsby offre une gamme d'avantages dont tout site Web peut profiter, notamment :

• Vitesses de chargement plus rapides. Les sites Web statiques se chargent plus rapidement que les sites dynamiques, ce qui peut avoir un impact sur votre optimisation pour les moteurs de recherche (SEO). La vitesse de chargement des pages est un signal utilisé par les moteurs de recherche et affecte les taux de rebond de votre site Web.
• Coûts de serveur réduits. Les sites Web dynamiques nécessitent des piles technologiques et des serveurs compatibles. Les sites Web statiques ne le font pas et vous pouvez les héberger sur n'importe quel serveur. Cela peut réduire vos coûts de serveur.
• Sécurité améliorée. Les sites Web statiques offrent une sécurité améliorée. Les fichiers HTML statiques servis n'offrent pas grand-chose aux pirates. Si ces fichiers sont perdus pour une raison quelconque, vous pouvez également les régénérer avec Gatsby.

Votre site Web peut bénéficier de tous ces avantages. Cependant, vous devez les comparer aux inconvénients de l'utilisation de Gatsby.

Inconvénients de l'utilisation de Gatsby

Aucun système logiciel n'est parfait, et Gatsby a quelques inconvénients que vous devez connaître :

• Connaissances techniques nécessaires. Gatsby est construit sur ReactJS et utilise GraphQL. Pour l'utiliser, une certaine compréhension de JavaScript est nécessaire. Vous devrez également avoir une connaissance de base de GraphQL pour créer un site Web.
• Pas de contenu dynamique. Gatsby ne génère que des sites Web statiques. Si vous souhaitez un contenu dynamique tel que des formulaires de contact, ils doivent être redirigés via un fournisseur tiers.

Alors que de nombreux développeurs trouvent que les avantages de Gatsby l'emportent sur les inconvénients, il est important de comprendre les deux à l'avance.

Comment utiliser Gatsby avec WordPress ?

La configuration de Gatsby peut prendre un certain temps et vous devrez suivre certaines étapes. Vous devez installer Gatsby avant de pouvoir commencer à générer votre site et à le configurer. De plus, il y a quelques considérations initiales à faire.

Étape 1 : Vérifiez les prérequis

Avant de pouvoir installer Gatsby, vous devez installer NodeJS et npm dans l'environnement de votre site Web. Git est également requis pour la gestion du code. Les étapes d'installation des prérequis varient selon le système d'exploitation que vous exécutez.

Si vous avez Windows, vous pouvez installer NodeJS et Git via le programme d'installation sur la page de téléchargement. La même chose est possible avec Mac. Cependant, si vous exécutez Linux, un programme d'installation de package tel que apt est requis.

Étape 2 : Installer Gatsby

Après avoir installé NodeJS et Git, vous pouvez commencer à installer Gatsby. La méthode la plus simple consiste à utiliser la commande suivante dans votre terminal logiciel :

 npm install -g gatsby-cli

Cette commande exécute automatiquement le programme d'installation. Il va d'abord télécharger et installer toutes les dépendances avant d'installer Gatsby. Une fois cette opération terminée, vous pouvez commencer à créer votre premier site Web Gatsby.

Étape 3 : Créer un site Gatsby

Pour créer votre site Web Gatsby, vous devrez exécuter la commande suivante :

 gatsby new gatsby-site

Cette commande clone le modèle de démarrage Gatsby et le place dans le répertoire /gatsby-wordpress . Une fois le clonage et l'installation terminés, vous pouvez ouvrir la version de développement du site. Cela se fait à l'aide de la commande suivante :

 gatsby develop

Pendant que l'environnement de développement est en cours d'exécution, vous pouvez visiter localement votre nouveau site Web. Dans votre navigateur Web, entrez http://localhost:8000 et votre modèle par défaut devrait s'ouvrir.

Si vous voyez cette page, vous pouvez commencer à créer votre site Web. Cela signifie créer les fichiers statiques dans le répertoire public de ces sites Web. La commande suivante lance automatiquement la production de ces fichiers statiques :

 gatsby build

Cette commande génère également les bundles de code JavaScript de pré-routage pour votre site Web. Vous pouvez ensuite utiliser la commande serve pour afficher localement votre nouveau site Web :

 gatsby serve

Cette commande ne fonctionnera que si vous avez déjà exécuté la commande build.

Étape 4 : Connectez Gatsby à WordPress

Vous avez maintenant un site Web statique de base, mais vous devez l'intégrer à WordPress. Cela pointe votre site Gatsby vers l'adresse de votre blog WordPress, ce qui lui permet d'extraire les dernières données lorsque vous exécutez le serveur de développement. Une fois connecté, Gatsby créera un site Web statique basé sur votre modèle WordPress actuel.

Pour connecter les deux, vous devrez installer le plugin Gatsby pour WordPress. La commande suivante s'en chargera :

 npm install gatsby-source-wordpress

Après avoir installé le plugin, vous pouvez commencer à configurer Gatsby.

Étape 5 : Configurez Gatsby

Pour configurer Gatsby, vous devez travailler avec le fichier gatsby-config.js . Dans ce fichier, ajoutez le code suivant :

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Mettez à jour ce code pour pointer vers votre site WordPress. Si votre site Web est hébergé localement, après baseUrl, vous pouvez utiliser localhost:8888/wordpress au lieu de l'URL de votre site Web. Après avoir enregistré le fichier, vous devrez créer vos modèles de page.

Étape 6 : Créer des modèles de page

La création de modèles de page permet à Gatsby de générer une publication pour chaque page de votre site Web WordPress. Le plugin source extraira les données dont vous avez besoin de WordPress pour ces pages, mais vous devrez créer le modèle de conception.

Dans votre fichier gatsby-node.js , ajoutez le code suivant :

 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 posts's data. context: { id: edge.node.id, }, }) }) }

Après avoir appelé toutes les données de WordPress, Gatsby générera une page pour chaque publication. À l'aide de la commande develop, vous pouvez accéder à chaque nouvelle page à l'aide de l'URL générée.

Dois-je utiliser Gatsby pour WordPress ?

Bien que Gatsby puisse améliorer la vitesse et la sécurité de votre site Web, ce n'est pas le bon choix pour tout le monde. Si votre site Web a un contenu statique qui ne change pas souvent, Gatsby peut être bénéfique. Cependant, si vous avez besoin de contenu dynamique sur votre site Web, WordPress traditionnel pourrait être le meilleur choix.

Tirez le meilleur parti de votre site sur WP Engine

Gatsby est un générateur de site Web statique efficace que vous pouvez facilement intégrer à WordPress. Vous devez suivre certaines étapes pour installer et configurer le système. Vous devez également avoir une certaine connaissance de Gatsby et GraphQL avant de commencer.

Le contenu statique peut améliorer la vitesse et la sécurité de votre site Web, mais vous avez également besoin du bon hébergeur. WP Engine offre les meilleures ressources pour votre site Web afin de créer une excellente expérience numérique. Cela vous laisse plus de temps pour vous concentrer sur le développement !