{"id":76600,"date":"2024-03-20T09:40:54","date_gmt":"2024-03-20T08:40:54","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76600&preview=true&preview_id=76600"},"modified":"2024-03-22T10:22:22","modified_gmt":"2024-03-22T09:22:22","slug":"site-statique-wordpress-astro","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/site-statique-wordpress-astro\/","title":{"rendered":"Construire un site statique avec WordPress et Astro"},"content":{"rendered":"

Astro est un framework frontend moderne qui permet aux d\u00e9veloppeurs de cr\u00e9er des sites web statiques<\/a> rapides et efficaces. Avec Astro<\/a>, les d\u00e9veloppeurs peuvent exploiter la puissance des frameworks JavaScript modernes tels que React<\/a>, Vue.js<\/a> et Svelte<\/a> pour cr\u00e9er des interfaces utilisateur dynamiques tout en produisant des fichiers HTML, CSS et JavaScript statiques au cours du processus de construction.<\/p>\n

Associ\u00e9 \u00e0 WordPress<\/a> en tant que syst\u00e8me de gestion de contenu<\/a> (CMS) headless, Astro permet une int\u00e9gration transparente des API du backend et du code du frontend, ce qui permet de d\u00e9velopper efficacement des sites web statiques avec un contenu dynamique. Cette approche pr\u00e9sente plusieurs avantages.<\/p>\n

Les sites statiques g\u00e9n\u00e9r\u00e9s avec Astro et un backend WordPress offrent des performances sup\u00e9rieures. Ils peuvent \u00eatre servis directement \u00e0 partir d’un r\u00e9seau de diffusion de contenu<\/a> (CDN), ce qui \u00e9limine le besoin de traitement c\u00f4t\u00e9 serveur et se traduit par des temps de chargement plus rapides et une exp\u00e9rience utilisateur plus fluide.<\/p>\n

Ce tutoriel vous guide dans la mise en place d’un site statique utilisant Astro h\u00e9berg\u00e9 sur le service d’h\u00e9bergement de sites statiques de Kinsta<\/a> et utilisant WordPress pour le backend.<\/p>\n

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

Le r\u00f4le de WordPress en tant que CMS headless<\/h2>\n

Un CMS headless<\/a>, comme WordPress, s\u00e9pare les couches de gestion et de diffusion du contenu. Il permet au backend de maintenir le contenu tandis qu’un autre syst\u00e8me, comme Astro, g\u00e8re le frontend.<\/p>\n

WordPress sert de r\u00e9f\u00e9rentiel de contenu et fournit des donn\u00e9es au frontend, qui affiche le contenu aux utilisateurs par l’interm\u00e9diaire d’une API. Cette architecture am\u00e9liore la flexibilit\u00e9 en vous permettant de r\u00e9utiliser le contenu pour plusieurs sorties, offrant aux utilisateurs de WordPress une exp\u00e9rience famili\u00e8re de la gestion de contenu.<\/p>\n

Le fait de d\u00e9coupler le frontend du backend offre \u00e9galement une plus grande flexibilit\u00e9 dans la conception du frontend et la migration du contenu. En outre, l’accessibilit\u00e9 par le biais d’API permet d’assurer la p\u00e9rennit\u00e9 du contenu.<\/p>\n

Mettre en place votre environnement de d\u00e9veloppement<\/h2>\n

Vous devez suivre trois \u00e9tapes pour configurer votre environnement :<\/p>\n

    \n
  1. Installez Astro.<\/li>\n
  2. Cr\u00e9ez un site WordPress.<\/li>\n
  3. Cr\u00e9ez un environnement de staging WordPress.<\/li>\n<\/ol>\n

    Pr\u00e9-requis<\/h3>\n

    Pour suivre ce tutoriel, assurez-vous d’avoir les \u00e9l\u00e9ments suivants :<\/p>\n