Comment créer un site Web en utilisant WordPress et Gatsby (en 4 étapes)

WordPress sans tête est de plus en plus populaire auprès des développeurs qui veulent plus de contrôle sur son contenu. Cependant, à un moment donné, vous devez créer un front – end pour un système de gestion de contenu sans en – tête (SGC). Heureusement, il existe des outils qui peuvent réduire considérablement la complexité de la création d’un front – end personnalisé. Avec le lancement récent de Gatsby source WordPress Integration, il est maintenant plus facile d’associer Ce générateur de site statique populaire à un CMS sans tête et de créer une belle image publique de votre contenu. Dans cet article, nous explorerons ce qu’est Gatsby et ce que la nouvelle intégration signifie pour les développeurs WordPress. Ensuite, nous vous montrerons comment créer un site Web simple en utilisant WordPress et Gatsby Static site Builder. Allons – y!
Introduction au cadre Gatsby (et pourquoi vous pourriez vouloir l’utiliser) Gatsby est un générateur de site statique basé sur React, supporté par graphql. Alors que vous continuez à créer et à gérer du contenu en utilisant l’arrière – plan WordPress familier, il vous donne la liberté de concevoir et de construire votre propre avant – plan. Cela fait du cadre Gatsby un choix populaire pour les développeurs WordPress qui veulent créer des configurations sans en – tête. Contrairement aux autres technologies React, Gatsby se concentre sur la vitesse. Ce constructeur de site crée des projets à l’aide de fichiers HTML statiques optimisés par les performances.
Gatsby ne télécharge que les fichiers nécessaires pour améliorer les performances. Cela permet de réduire au minimum le temps de chargement et donne à Gatsby la souplesse nécessaire pour demander des ressources supplémentaires au besoin. En réduisant le temps de chargement de la page, le cadre Gatsby peut réduire les taux de sauts et encourager les gens à visiter plus de sites Web. Cela peut augmenter les indicateurs clés, y compris le temps passé sur le site, et aider à stimuler davantage de conversions. Et Google
Assurez – vous également d’utiliser la vitesse de la page comme facteur de classement lorsque vous évaluez où le contenu devrait apparaître dans les résultats de la recherche. En choisissant des solutions axées sur la performance comme Gatsby, vous pouvez éprouver des améliorations dans le référencement.
D’autre part, Gatsby est connu pour sa difficulté à apprendre, en particulier par rapport au cadre de la frontière concurrentielle. Cependant, l’équipe Gatsby a récemment annoncé que l’intégration formelle de Gatsby source WordPress est maintenant stable. En combinant Ce plugin avec le plugin wpgatsby et le projet de page d’accueil de Gatsby WordPress, vous devriez maintenant être en mesure d’extraire plus facilement les données de votre installation WordPress et de les visualiser en utilisant Gatsby. Comment construire un site Web avec wordpress et Gatsby (en 4 étapes) maintenant que nous avons expliqué ce qu’est Gatsby et pourquoi vous pourriez vouloir l’utiliser, voyons comment commencer à utiliser ce générateur de site populaire. Dans cette section, nous allons créer un site de démarrage simple en reliant Gatsby à une installation WordPress existante.
Étape 1: préparer votre environnement de développement nous allons créer notre page d’accueil en utilisant le plugin wpgatsby, qui optimise votre site WordPress pour en faire une source de données pour Gatsby. Nous allons également utiliser le plugin wpgraphql pour créer une connexion entre WordPress et Gatsby: Le plug – in wpgatsby crée un journal d’événements administratifs que gatsbsy utilisera pour obtenir des modifications au contenu après la construction initiale. Si vous décidez de continuer à travailler sur ce projet, wpgatsby fournira tout ce dont vous avez besoin pour activer automatiquement ces constructions, y compris un aperçu de Gatsby.
Après avoir installé et activé wpgatsby et wpgraphql, vous devez vous assurer d’avoir le gestionnaire de paquets de noeuds (NPM), c’est – à – dire le temps d’exécution du noeud. JS et Gatsby sont installés sur votre ordinateur. La façon la plus simple de télécharger tout cela
Ce composant utilisera un gestionnaire de paquets maison. Ce programme s’applique à mac os et Linux: Pour installer un logiciel maison, ouvrez une application en ligne de commande sur votre ordinateur. Ensuite, lancez la commande suivante: \/ bin \/ bash – C \
Brew install Node Next Step, it is time to install Gatsby CLI Tools. Nous utiliserons ce paquet NPM pour exécuter des commandes pour développer des sites basés sur Gatsby. Dans l’application en ligne de commande, saisissez ce qui suit: Brew install Gatsby CLI Notez que, selon la configuration de votre ordinateur, vous devrez peut – être modifier les permissions de fichier à ce stade. Si des modifications sont nécessaires, l’application en ligne de commande doit afficher toutes les informations nécessaires. Étape 2: Télécharger le projet getsby Framework starter afin de minimiser la quantité d’installation nécessaire, nous utiliserons le projet getsby original. Ce projet est livré avec les principaux profils de Gatsby WordPress.
Pour installer le projet de démarrage Gatsby, vous devez contrôler la version GIT. Si vous ne l’avez pas encore fait, vous pouvez télécharger la dernière version sur le site officiel: Après l’installation de GIT, changez le Répertoire (CD) de sorte que la ligne de commande pointe à l’endroit où vous voulez créer le site Gatsby local. Par exemple, si vous voulez créer votre propre site sur votre bureau, la commande peut ressembler à ceci: CD \/ Users \/ username \/ Desktop pour créer un nouveau projet en utilisant le site de démarrage WordPress Gatsby, lancez la commande suivante: Gatsby New my WordPress Gatsby site https:\/\/github.com\/gatsbyjs\/gatsby-started-wordpress-blog Ce processus peut prendre plusieurs minutes
UTI. Cependant, une fois terminé, vous remarquerez que GIT a créé un nouveau projet à l’endroit que vous avez indiqué:
Vous pouvez maintenant commencer à construire l’avant du site. Étape 3: démarrer la ligne de commande du serveur de développement du cadre Gatsby vous demandera maintenant de commencer le projet de développement en fournissant deux commandes. Selon l’endroit où vous avez créé le projet Gatsby, ces commandes devraient ressembler à ceci: CD my WordPress Gatsby site Gatsby Development pour démarrer le serveur de développement, lancez les deux commandes. Voilà: votre site de démonstration fonctionne maintenant dans votre environnement de développement. Vous pouvez voir le site localement en ouvrant un nouvel onglet dans le navigateur et en naviguant vers http:\/\/localhost:8000\/ – Oui.
À ce stade, le cadre Gatsby ne montre que du contenu fictif. Dans l’étape suivante, nous allons lier Gatsby à votre installation WordPress afin que vous puissiez voir vos messages et pages. Étape 4: connectez Gatsby à WordPress si vous ouvrez le répertoire Gatsby local, vous trouverez tous les fichiers de la page d’accueil Gatsby. Vous pouvez ensuite trouver le profil Gatsby. JS et ouvrez – le dans n’importe quel éditeur de texte compatible: Pour connecter WordPress à Gatsby, vous devez pointer Gatsby vers l’url de votre site. Dans l’éditeur de texte, trouvez la section suivante: URL: process. Environnement. Wpgraphql _ URL | » https:\/\/wpgatsbydemo.wpengine.com\/graphql « Vous pouvez remplacer l’URL par le paramètre \/ graphql créé lors de l’installation du plug – in wpgraphql. Par défaut, wpgraphql ajoute ce paramètre à http:\/\/yoursite.com\/graphql – Oui. Par exemple, si votre site Web en est un exemple. Com, vous devez ajouter ce qui suit:
URL: processus. Environnement. Wpgraphql _ URL | » https:\/\/example.com\/graphql « après avoir effectué ce changement, sauvegardez le fichier et fermez l’éditeur de texte. Dans un navigateur Web, mettre à jour l’onglet http:\/\/localhost:8000\/ – Oui. Lorsque vous chargez une page, vous devez afficher votre site WordPress: