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

Associé à WordPress en tant que système de gestion de contenu (CMS) headless, Astro permet une intégration transparente des API du backend et du code du frontend, ce qui permet de développer efficacement des sites web statiques avec un contenu dynamique. Cette approche présente plusieurs avantages.

Les sites statiques générés avec Astro et un backend WordPress offrent des performances supérieures. Ils peuvent être servis directement à partir d’un réseau de diffusion de contenu (CDN), ce qui élimine le besoin de traitement côté serveur et se traduit par des temps de chargement plus rapides et une expérience utilisateur plus fluide.

Ce tutoriel vous guide dans la mise en place d’un site statique utilisant Astro hébergé sur le service d’hébergement de sites statiques de Kinsta et utilisant WordPress pour le backend.

Le rôle de WordPress en tant que CMS headless

Un CMS headless, comme WordPress, sépare les couches de gestion et de diffusion du contenu. Il permet au backend de maintenir le contenu tandis qu’un autre système, comme Astro, gère le frontend.

WordPress sert de référentiel de contenu et fournit des données au frontend, qui affiche le contenu aux utilisateurs par l’intermédiaire d’une API. Cette architecture améliore la flexibilité en vous permettant de réutiliser le contenu pour plusieurs sorties, offrant aux utilisateurs de WordPress une expérience familière de la gestion de contenu.

Le fait de découpler le frontend du backend offre également une plus grande flexibilité dans la conception du frontend et la migration du contenu. En outre, l’accessibilité par le biais d’API permet d’assurer la pérennité du contenu.

Mettre en place votre environnement de développement

Vous devez suivre trois étapes pour configurer votre environnement :

  1. Installez Astro.
  2. Créez un site WordPress.
  3. Créez un environnement de staging WordPress.

Pré-requis

Pour suivre ce tutoriel, assurez-vous d’avoir les éléments suivants :

Installer Astro

  1. Pour votre projet, créez un nouveau répertoire et naviguez-y.
  2. Créez un nouveau projet en exécutant la commande ci-dessous dans votre terminal : 
    npm create astro@latest

    Cette étape génère des invites de configuration. Configurez-les en fonction de ce que vous souhaitez.

    Instructions pour la configuration de votre nouveau projet Astro.
    Instructions pour la configuration de votre nouveau projet Astro.

  3. Une fois le projet créé avec succès, exécutez npm run dev pour lancer le serveur de développement local sur http://localhost:4321/.

    Astro a bien été installé.
    Astro a bien été installé.

Configurer un site WordPress sur Kinsta

Kinsta est un hébergeur WordPress haut de gamme réputé pour son interface intuitive et son infrastructure performante. Suivez ces étapes pour créer un site WordPress sur Kinsta.

  1. Sur votre tableau de bord MyKinsta, cliquez sur Sites WordPress puis sur Créer un site.
  2. Sélectionnez l’option Installer WordPress et cliquez sur Continuer.
  3. Indiquez le Nom du site, sélectionnez l’emplacement du centre de données et cliquez sur Continuer.
  4. Fournissez toutes les autres informations et cliquez sur Continuer.
  5. Une fois votre site créé, vous devriez voir apparaitre le message « Votre site a été créé ! »

Créer un environnement de staging WordPress

Chaque installation de WordPress chez Kinsta a la possibilité de créer un environnement de staging gratuit, séparé du site de production. Cet environnement est idéal pour tester les nouvelles versions de WordPress, les extensions, le code et le travail de développement en général.

Les étapes pour créer un environnement de staging WordPress sur Kinsta sont les suivantes.

  1. Dans la barre de menu, cliquez sur Live puis sur Créer un nouvel environnement.

    Environnement de staging WordPress.
    Environnement de staging WordPress.

  2. Sélectionnez Environnement standard et cliquez sur Continuer.
  3. Cliquez sur Cloner un environnement existant, indiquez un Nom d’environnement, sélectionnez Live pour l’environnement à cloner et cliquez sur Continuer.
  4. Une fois déployé, vous trouverez l’environnement de staging WordPress dans le menu Live.

    Création réussie d'un environnement de staging.
    Création réussie d’un environnement de staging.

Intégrer WordPress à Astro

Il existe deux méthodes principales pour intégrer WordPress à Astro : une API REST et GraphQL. Ce guide utilise l’approche GraphQL.

Pour intégrer WordPress à Astro, vous devez :

  • Installer WPGraphQL.
  • Connecter Astro à WordPress.

Installer WPGraphQL

Tout d’abord, installez l’extension WPGraphQL sur votre site WordPress avant d’utiliser GraphQL pour y connecter Astro.

  1. Sur le tableau de bord MyKinsta, sélectionnez votre site WordPress.
  2. Dans la barre de menu, cliquez sur Staging puis sur Ouvrir WP Admin dans le coin supérieur droit.

    Page d'information sur le site.
    Page d’information sur le site.

  3. Indiquez les informations d’identification que vous avez utilisées lors de la création de votre site WordPress.
  4. Cliquez sur le menu Extensions dans la colonne de navigation de gauche.
  5. Cliquez sur Ajouter une extension pour ajouter l’extension WPGraphQL.
  6. Recherchez « WPGraphQL », cliquez sur Installer pour installer l’extension WPGraphQL, puis cliquez sur Activer.

    Installation de l'extension WPGraphQL.
    Installation de l’extension WPGraphQL.

  7. Pour tester que l’extension WPGraphQL que vous avez installé fonctionne comme prévu, ouvrez le menu GraphQL sur la barre de navigation et cliquez sur GraphiQL IDE.
  8. Utilisez le code suivant dans l’IDE GraphiQL et cliquez sur Exécuter en haut à gauche pour exécuter la requête GraphQL : 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Cette requête GraphQL récupère efficacement les adresses slugs, excerpts, et titles des articles du site WordPress.

    Exécutez la requête GraphQL.
    Exécutez la requête GraphQL.

    Sur le côté gauche de l’IDE GraphiQL, vous pouvez voir la liste des articles retournés par la requête GraphQL. Votre point de terminaison WordPress GraphQL est accessible à l’adresse https://your_wordpress_staging_url/graphql.

Connecter Astro à WordPress

Pour connecter Astro à WordPress, suivez ces instructions :

  1. Créez un dossier nommé graphql dans le dossier src de votre projet Astro.
  2. Créez un fichier wordPressQuery.ts dans le dossier graphql.
  3. Utilisez le code suivant dans votre fichier wordPressQuery.ts. Veillez à remplacer https://your_wordpress_staging_url/graphql par l’URL de votre site WordPress. 
    interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

    Ce code définit une interface gqlParams et une fonction asynchrone wpquery qui facilite les requêtes GraphQL sur le site WordPress.

Développer votre site avec Astro et WordPress

  1. Pour créer une nouvelle page statique dans Astro, créez un fichier nommé blog.astro dans le répertoire src/pages.
  2. Collez le code suivant dans le fichier nouvellement créé : 
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
	query: `
 	 {
		posts{
			nodes{
				slug
				excerpt
				title
			}
 		 }
	 }  
 	`,
});
---

<Layout title="Astro-WordPress Blog Posts">
	<main>
		<h1><span class="text-gradient">Blog Posts</span></h1>

		{
			data.posts.nodes.map((post: any) => (
				<>
					<h2 set:html={post.title} />
					<p set:html={post.excerpt} />
				</>
			))
		}
	</main>
</Layout>
<style>
	main {
		margin: auto;
		padding: 1rem;
		width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}
</style>

    Ce code montre comment utiliser la fonction wpquery pour récupérer les données du site WordPress à l’aide de GraphQL et les restituer sur le site Astro.

  3. Utilisez npm run dev pour lancer le serveur de développement local et voir les derniers articles du blog WordPress sur votre site Astro à l’adresse http://localhost:4321/blog.

    Projet Astro affichant les articles de WordPress.
    Projet Astro affichant les articles de WordPress.

Pour gérer le routage dynamique d’articles de blog individuels, vous devez utiliser une combinaison des routes dynamiques d’Astro et des variables de requête de WordPress GraphQL. En passant l’ID de l’article ou le slug comme variable de requête, vous pouvez générer dynamiquement le contenu de la page pour chaque article de blog. Cela permet une expérience utilisateur plus personnalisée sur votre site web.

Déployer votre site statique sur Kinsta

Maintenant, poussez vos codes vers votre fournisseur Git préféré (Bitbucket, GitHub ou GitLab). Ensuite, suivez les étapes suivantes pour déployer votre site statique sur Kinsta :

  1. Dans le tableau de bord MyKinsta, cliquez sur Sites statiques puis sur Ajouter un site.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Sélectionnez un dépôt GitHub et une branche par défaut. Fournissez un nom d’affichage pour votre site statique et cochez la case Déploiement automatique lors du cvommit. Cela permet le déploiement automatique de toutes les nouvelles modifications apportées au référentiel. Cliquez sur Continuer.
  4. Dans la section Réglages de construction, Kinsta remplit automatiquement tous les champs. Laissez tout tel quel et cliquez sur Créer le site.
  5. Accédez à votre site Astro en allant à l’URL qui apparait comme domaine sur la page d’aperçu de votre site déployé. Vous pouvez accéder aux articles de blog via https://your_kinsta_site_url/blog.

Résumé

Les possibilités offertes par Astro et WordPress ne s’arrêtent pas là. L’API WordPress peut être utilisée pour accéder à diverses données de votre site et créer des cas d’utilisation uniques avec Astro.

Avec l’hébergement WordPress infogéré de Kinsta, vous avez accès à une infrastructure robuste, un CDN mondial, une mise en cache en périphérie, plusieurs centres de données et des fonctionnalités de niveau entreprise. Cela garantit un environnement rapide et sécurisé pour votre site WordPress.

De plus, lorsque vous utilisez des frameworks frontend comme Astro avec WordPress headless, vous pouvez héberger ses fichiers statiques sur l’hébergement de site statique de Kinsta gratuitement. Cela signifie que vous ne payez que pour l’hébergement de WordPress, maximisant ainsi l’efficacité et la rentabilité.

Que pensez-vous de WordPress headless et d’Astro ? Avez-vous exploré leur potentiel pour créer des solutions uniques ? Partagez vos expériences dans la section des commentaires ci-dessous.

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).