{"id":35463,"date":"2019-12-23T09:42:57","date_gmt":"2019-12-23T17:42:57","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-10-13T18:49:07","modified_gmt":"2023-10-13T17:49:07","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/gatsby-wordpress\/","title":{"rendered":"Introduction \u00e0 la Construction de Sites Web avec Gatsby et WordPress (Rapide et Statique)"},"content":{"rendered":"

Comment fonctionne un site web dynamique typique, comme ceux bas\u00e9s sur WordPress ? Lorsqu’un visiteur saisi l’URL sur un navigateur ou visite votre site Web par un lien, une requ\u00eate est envoy\u00e9e \u00e0 votre serveur Web.<\/p>\n

Le serveur recueille les donn\u00e9es n\u00e9cessaires par le biais de requ\u00eates de base de donn\u00e9es et g\u00e9n\u00e8re un fichier HTML<\/a> que votre navigateur peut afficher. Les sites statiques, par contre, stockent sur le serveur ces r\u00e9ponses dans des fichiers qui sont instantan\u00e9ment livr\u00e9s \u00e0 un visiteur.<\/p>\n

Les g\u00e9n\u00e9rateurs de sites statiques<\/a> existent depuis longtemps, mais leur popularit\u00e9 a augment\u00e9 r\u00e9cemment. Dans ce guide pas \u00e0 pas, nous examinons l’int\u00e9gration de WordPress avec Gatsby<\/strong>, un g\u00e9n\u00e9rateur de site statique.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que Gatsby ?<\/h2>\n

WordPress cr\u00e9e des sites web dynamiques, qui n\u00e9cessitent une pile de PHP<\/a>, MySQL<\/a>, et Apache ou Nginx<\/a> sur le serveur pour fonctionner. Il est possible de cr\u00e9er une version statique de WordPress en g\u00e9n\u00e9rant une liste de pages HTML pour tout le contenu de votre site.<\/p>\n

Cette version statique de WordPress est appel\u00e9e WordPress headless ou serverless<\/a> WordPress. Ce processus de conversion est effectu\u00e9 une seule fois afin que la m\u00eame page puisse \u00eatre servie plusieurs fois aux visiteurs. Comment convertir votre site WordPress en version statique ? C’est l\u00e0 que Gatsby entre en sc\u00e8ne.<\/p>\n

Gatsby<\/a>, ou GatsbyJS, est un g\u00e9n\u00e9rateur de site statique construit avec ReactJS<\/a> et aliment\u00e9 par GraphQL<\/a>. Gatsby permet \u00e0 quiconque de cr\u00e9er des sites Web et des applications riches en fonctionnalit\u00e9s et attrayantes. Gatsby r\u00e9cup\u00e8re des donn\u00e9es pour votre site \u00e0 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\u00e9glages de configuration que vous avez sp\u00e9cifi\u00e9s.<\/p>\n

Gatsby a \u00e9t\u00e9 d\u00e9velopp\u00e9 il y a seulement un an, mais un grand nombre d’utilisateurs essayent Gatsby. Gatsby a \u00e9t\u00e9 accept\u00e9 dans divers milieux. La page d’accueil du Airbnb\u2019s Data Science and Engineering Blog<\/a> est aliment\u00e9e par Gatsby, bien que les articles actuels du blog soient h\u00e9berg\u00e9s sur Medium.<\/p>\n

\"Blog
Blog de l’ing\u00e9nierie et de la science des donn\u00e9es d’Airbnb<\/figcaption><\/figure>\n

Braun est une marque de la soci\u00e9t\u00e9 de biens de consommation P&G. Son site canadien<\/a> est h\u00e9berg\u00e9 avec Gatsby, tandis que la fonction de recherche sur le site est assur\u00e9e par React.<\/p>\n

\"Le
Le site Web canadien de Braun<\/figcaption><\/figure>\n

De plus, Gatsby a \u00e9galement suscit\u00e9 l’int\u00e9r\u00eat des d\u00e9veloppeurs ind\u00e9pendants<\/a> pour leurs portfolios<\/a>. Les portfolios comme celui de Jacob Castro<\/a> 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 \u00e0 ses besoins.<\/p>\n

\"Le
Le portfolio de Jacob D. Castro<\/figcaption><\/figure>\n

Pourquoi Choisir Gatsby ?<\/h3>\n

Sites Web rapides : <\/strong>Le principal avantage de la construction d’un site statique avec Gatsby est la vitesse<\/a>, que les webmasters ont essay\u00e9 d’optimiser depuis l’annonce de Google d’utiliser la vitesse du site dans le classement de recherche web<\/a>. Les temps de chargement affectent \u00e9galement les vues et les conversions des pages. On a estim\u00e9 qu’un retard d’une seconde dans le temps de chargement du site peut entra\u00eener une r\u00e9duction de 7 % des conversions<\/a>.<\/p>\n

S\u00e9curit\u00e9 : <\/strong>Vous obtenez \u00e9galement une s\u00e9curit\u00e9<\/a> suppl\u00e9mentaire avec un site statique. Comme c’est un tas de fichiers statiques qui sont servis, il n’y a pas grand-chose \u00e0 pirater. De plus, vous pouvez toujours g\u00e9n\u00e9rer \u00e0 nouveau les fichiers statiques s’ils sont perdus.<\/p>\n

Co\u00fbts du serveur : <\/strong>L’h\u00e9bergement d’un site dynamique n\u00e9cessite que votre serveur soit compatible avec votre pile technologique. Si vous travaillez avec un site statique, vous pouvez l’h\u00e9berger sur presque n’importe quel serveur, ce qui r\u00e9duit aussi le co\u00fbt associ\u00e9 \u00e0 l’h\u00e9bergement.<\/p>\n

G\u00e9n\u00e9rer le site statique avec Gatsby \u00e0 chaque changement n\u00e9cessite du JavaScript, ce qui peut aussi \u00eatre fait sur une machine locale avant de transf\u00e9rer les fichiers statiques sur le site.<\/p>\n

Pourquoi \u00c9viter Gatsby ?<\/h3>\n

Pas de contenu dynamique : <\/strong>L’utilisation de Gatsby \u00e9limine la possibilit\u00e9 d’avoir n’importe quel type de contenu dynamique sur votre site. Les commentaires<\/a> doivent \u00eatre h\u00e9berg\u00e9s en externe par un service comme Disqus<\/a>.<\/p>\n

Les formulaires de contact devraient<\/a> \u00e9galement \u00eatre r\u00e9-achemin\u00e9s par un partenaire externe comme Google Forms<\/a>. En bref, vous perdriez le contr\u00f4le direct de ce contenu dynamique, car leurs r\u00e9ponses ne sont pas stock\u00e9es sur vos serveurs.<\/p>\n

Les constructions fr\u00e9quentes ne sont pas pratiques : <\/strong>Les sites statiques ont \u00e9galement le probl\u00e8me des reconversions fr\u00e9quentes. Tout changement que vous faites sur votre site n’est pris en compte qu’une fois que vous avez r\u00e9g\u00e9n\u00e9r\u00e9 les pages et les avez recharg\u00e9es sur le serveur.<\/p>\n

Expertise technique : <\/strong>Gatsby est construit sur ReactJS et GraphQL. Une certaine connaissance de JavaScript et une id\u00e9e de base de GraphQL sont donc n\u00e9cessaires pour travailler avec et porter un site web sur Gatsby.<\/p>\n

Les sites web statiques<\/a> sont bons pour ceux qui recherchent une solution \u00e0 faible co\u00fbt, avec une haute s\u00e9curit\u00e9. Certains cas d’utilisation sont des sites de portfolio pour les travailleurs ind\u00e9pendants et des sites de d\u00e9monstration de produits.<\/p>\n

Si vous pensez que les avantages l’emportent sur les inconv\u00e9nients, tant mieux ! Nous allons maintenant essayer de mettre en place Gatsby pour l’int\u00e9grer \u00e0 notre site WordPress<\/a>.<\/p>\n

La derni\u00e8re version du site Gatsby que nous construisons dans ce tutoriel est disponible sur GitHub<\/a> pour votre utilisation.<\/p>\n

\u00c9tape 1 : Configuration de Gatsby<\/h2>\n

Dans cette section, nous allons voir comment installer Gatsby et cr\u00e9er un site statique de base avec Gatsby.<\/p>\n

Conditions Pr\u00e9alables<\/h3>\n

La premi\u00e8re \u00e9tape pour d\u00e9marrer avec Gatsby est de v\u00e9rifier ses pr\u00e9-requis. Gatsby est servi par npm, l’installateur de paquets de NodeJS. Par cons\u00e9quent, vous avez besoin de NodeJS et de npm dans votre environnement avant d’installer Gatsby. De plus, Gatsby n\u00e9cessite l’installation de Git<\/a>,<\/a> le syst\u00e8me de gestion du code source.<\/p>\n