Configurez Gatsby open source avec votre WordPress pour apporter une plus grande expérience utilisateur et des performances globales. Apprenons à utiliser ce générateur de sites statique.

gatsby wordpress

Aperçu

GATSBYJS est un générateur de sites statiques à alimentation GraphQL STATIQUE gratuite et open source. Il utilise une préconfiguration puissante pour créer un site Web qui utilise uniquement des fichiers statiques pour des charges de page incroyablement rapides. WordPress est une excellente plate-forme de blogs open source. En conséquence, il y a beaucoup de gens qui savent comment déterminer si un site est un site WordPress afin qu’ils puissent les pirater et voler des informations. L’utilisation de Gatsby WordPress ensemble vous donnera la même puissance de la gestion du contenu WordPress et de la vitesse du GATSBY. Dans cet article, nous examinerons ce qu’est Gatsby et pourquoi vous devez l’utiliser avec le logiciel CMS. Ensuite, nous allons entrer en détail sur la façon d’utiliser WordPress et Gatsby ensemble pour créer une expérience de site Web incroyable. Commençons!

Qu’est-ce que Gatsby

Gatsby est un générateur de sites 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 à leur navigateur, au lieu du contenu dynamique que WordPress sert généralement. Il s’agit d’un cadre gratuit et open source basé sur React qui aide les développeurs à créer des sites Web et des applications rapides.

Avantages et inconvénients de l’utilisation de WordPress et Gatsby

Selon les [documents] officiels de Gatsby 5, ils ont compilé une table, pour laquelle la combinaison de Gatsby WordPress est grande et pour qui ce n’est pas. Par souci de facilité, je les répertorie ici. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress et Gatsby sont parfaits pour {{LINE_27}} {{LINE_28}} {{LINE_29}} Des équipes de contenu qui sont à l’aise avec l’expérience d’édition de contenu WordPress {{LINE_31}} {{LINE_32}} Des équipes de développement qui apprécient l’utilisation de technologies populaires open-source {{LINE_34}} {{LINE_35}} Refonte des sites avec du contenu déjà stocké dans WordPress {{LINE_37}} {{LINE_38}} Équipes qui souhaitent posséder leurs données et leur pile technologique {{LINE_40}} {{LINE_41}} Contrôle complexe des workflows ou des restrictions de modélisation de contenu {{LINE_43}} {{LINE_44}} Projets où la sécurité est importante {{LINE_46}} {{LINE_47}} Projets à forte demande où la performance est primordiale {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress et Gatsby ne sont pas parfaits pour {{LINE_55}} {{LINE_56}} {{LINE_57}} Équipes nécessitant l’utilisation de thèmes d’interface utilisateur WordPress {{LINE_59}} {{LINE_60}} Ceux qui recherchent un CMS cloud entièrement géré {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Outre ces points officiels, je voudrais énumérer certains avantages et inconvénients de l’utilisation de Gatsby WordPress ensemble {{LINE_67}} {{LINE_68}} {{LINE_69}} Avantages {{LINE_71}} {{LINE_72}} {{LINE_73}} Vitesses de chargement plus rapides - Les sites Web statiques se chargent plus rapidement que dynamique. En conséquence, cela a un impact sur les vitesses de votre page de chargement et le classement SEO. {{LINE_75}} {{LINE_76}} Moins de coûts de serveur - car les fichiers statiques n’ont pas besoin de logiciels spéciaux, donc les pages HTML statiques peuvent également être servies à partir de serveurs moins chers. {{LINE_78}} {{LINE_79}} Plus sécurisé - pour les sites statiques, il n’y a pas de composants mobiles de pièces, donc aucune chance pour les pirates d’exploiter votre logiciel. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Les inconvénients {{LINE_89}} {{LINE_90}} {{LINE_91}} Courbe d’apprentissage - Cela nécessite des compétences supplémentaires pour les développeurs. Comme apprendre ReactJS et GraphQL {{LINE_93}} {{LINE_94}} Seul le contenu statique - si vous avez besoin de servir un contenu dynamique. Alors Gatsby n’est pas pour vous. Il ne peut servir que des fichiers statiques. Par conséquent, vous ne pouvez pas avoir de système de commentaires qui récupère les données de la base de données. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Comment utiliser Gatsby avec WordPress

Avant de pouvoir installer Gatsby, vous devez installer NodeJS et NPM dans l’environnement de votre site Web.

Étape 1 - Installer Gatsby

npm install -g gatsby-cli

Cette commande exécute automatiquement l’installateur. Il télécharge et installe toutes les dépendances avant d’installer Gatsby. Une fois cela terminé, vous pouvez commencer à créer votre premier site Web Gatsby.

gatsby new gatsby-site

Cela téléchargera le modèle de démarrage de Gatsby et le placera dans le répertoire / Gatsby-WordPress. Une fois l’installation terminée, vous pouvez ouvrir la version de développement du site

gatsby develop

Maintenant, dans votre navigateur Web, entrez http: // localhost: 8000 et votre modèle par défaut doit s’ouvrir.

Modèle de démarrage de Gatsby

Étape 2 - Connectez Gatsby à WordPress

Dans cette section du guide Gatsby WordPress, nous connecterons ce générateur de sites statique à WordPress. Vous avez un site Web statique de base, mais vous devez l’intégrer avec WordPress. Cela pointe votre site Gatsby vers l’adresse de votre blog WordPress, en lui permettant de retirer les dernières données lorsque vous exécutez le serveur de développement. Une fois connecté, Gatsby créera un site Web statique en fonction de votre modèle actuel. Installez le plugin WordPress Gatsby Source à partir du référentiel NPM.

npm install gatsby-source-wordpress

Étape 3 - Configurer Gatsby

Mettez le code suivant dans votre fichier gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 Web WordPress. Si votre site Web est hébergé localement, après BUSURL, 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 4 - Modèles de page de construction

Les modèles de page de construction permettent à ce générateur de sites de générer une publication pour chaque page de votre site Web WordPress. Le plugin source tirera les données dont vous avez besoin à partir 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, Gatsby générera une page pour chaque message. À l’aide de la commande de développement, vous pouvez accéder à chaque nouvelle page à l’aide de l’URL générée.

Conclusion

Dans ce didacticiel Gatsby WordPress, nous avons couvert comment générer un site Web Gatsby à partir de WordPress. Nous avons appris quels sont les avantages et les inconvénients de ces deux logiciels open source. Nous avons également couvert comment installer et commencer par l’environnement de développement de Gatsby. Enfin, contenerize.com écrit des articles sur d’autres produits open source. Par conséquent, veuillez rester en contact avec la catégorie de plate-forme open source blogging pour les nouvelles et les mises à jour régulières.