Astro is een modern frontend framework dat ontwikkelaars in staat stelt om snelle en efficiënte statische websites te bouwen. Met Astro kunnen ontwikkelaars gebruikmaken van de kracht van moderne JavaScript frameworks zoals React, Vue.js en Svelte om dynamische gebruikersinterfaces te maken terwijl ze statische HTML-, CSS- en JavaScript-bestanden produceren tijdens het bouwproces.

In combinatie met WordPress als headless content management systeem (CMS) maakt Astro een naadloze integratie van backend API’s en frontend code mogelijk, waardoor statische websites met dynamische inhoud efficiënt kunnen worden ontwikkeld. Deze aanpak biedt verschillende voordelen.

Statische websites die zijn gemaakt met Astro en een WordPress backend hebben superieure prestaties. Ze kunnen direct vanuit een content delivery network (CDN) geleverd worden, waardoor er geen server-side verwerking nodig is en ze sneller laden en de gebruikerservaring soepeler is.

Deze handleiding leidt je door het proces van het opzetten van een statische site met Astro, gehost op Kinsta’s Statische Site Hosting dienst en met WordPress als backend.

De rol van WordPress als een headless CMS

Een headless CMS, zoals WordPress, scheidt de lagen van contentbeheer en levering. Het stelt de backend in staat om content te onderhouden en te beheren terwijl een ander systeem, zoals Astro, de frontend afhandelt.

WordPress dient als een opslagplaats voor content en levert gegevens aan de frontend, die de content weergeeft aan gebruikers via een API. Deze architectuur vergroot de flexibiliteit doordat je content kunt hergebruiken voor verschillende outputs, waardoor WordPress gebruikers een vertrouwde contentbeheer-ervaring hebben.

Het loskoppelen van de frontend van de backend biedt ook meer flexibiliteit in frontend ontwerp en contentmigratie. Bovendien is de toegankelijkheid via API’s ook prima geregeld voor de content.

Je ontwikkelomgeving opzetten

Er zijn drie stappen die je moet volgen om je omgeving op te zetten:

  1. Installeer Astro.
  2. Maak een WordPress site.
  3. Maak een WordPress testomgeving.

Vereisten

Om deze tutorial te kunnen volgen, moet je ervoor zorgen dat je over het volgende beschikt:

Astro installeren

  1. Maak voor je project een nieuwe map en navigeer daarin.
  2. Maak een nieuw project door het onderstaande commando in je terminal uit te voeren: 
    npm create astro@latest

    Deze stap produceert configuratieprompts. Stel ze in op basis van wat je wilt.

    Terminal venster met instructies voor het configureren van je nieuwe Astro project. De prompts zijn:- Waar moeten we je nieuwe project maken?- Hoe wil je je nieuwe project starten?- Ben je van plan TypeScript te schrijven?- Hoe strikt moet TypeScript zijn?- Dependencies installeren?- Een nieuwe git repository initialiseren?
    Instructies voor het configureren van je nieuwe Astro project.

  3. Zodra het project met succes is aangemaakt, voer je npm run dev uit om de lokale ontwikkelserver op http://localhost:4321/ te starten.

    De welkomstpagina van de Astro-site met links naar documentatie, integraties, thema's en de community.
    Astro met succes geïnstalleerd.

Een WordPress site opzetten op Kinsta

Kinsta is een hoogwaardige WordPress hostingprovider die bekend staat om zijn intuïtieve interface en krachtige infrastructuur. Volg deze stappen om een WordPress site te maken op Kinsta.

  1. Klik op je MyKinsta dashboard op WordPress sites en dan Site maken.
  2. Selecteer de optie WordPress installeren en klik op Doorgaan.
  3. Geef een sitenaam op, selecteer een datacenterlocatie en klik op Doorgaan.
  4. Geef alle andere informatie op en klik op Doorgaan.
  5. Zodra je site is gemaakt, zou je het bericht “Je site is gemaakt!” moeten zien

Een WordPress testomgeving maken

Elke WordPress installatie bij Kinsta heeft de optie om een gratis testomgeving te maken, los van de eigenlijke productiesite. Dit is geweldig voor het testen van nieuwe WordPress versies, plugins, code en algemeen ontwikkelwerk.

De stappen voor het maken van een WordPress Staging omgeving op Kinsta zijn als volgt.

  1. Klik in de menubalk op Live en vervolgens op Nieuwe omgeving maken.

    Pagina Site-informatie met de locatie van het datacenter en de naam van de site.
    WordPress testomgeving.

  2. Selecteer Standaard omgeving en klik op Doorgaan.
  3. Klik op Een bestaande omgeving klonen, geef een Omgevingsnaam op, selecteer Live voor de te klonen omgeving en klik op Doorgaan.
  4. Eenmaal uitgerold vind je de WordPress testomgeving in het Live menu.

    Site-informatiepagina met het menu Live met items voor Live, Staging en Nieuwe omgeving maken
    Succesvolle creatie van een testomgeving.

WordPress integreren met Astro

Er zijn twee primaire methoden om WordPress te integreren met Astro: een REST API en GraphQL. Deze handleiding gebruikt de GraphQL aanpak.

Om WordPress te integreren met Astro, moet je:

  • WPGraphQL installeren.
  • Astro verbinden met WordPress.

WPGraphQL installeren

Installeer eerst de WPGraphQL plugin op je WordPress site voordat je GraphQL gebruikt om Astro ermee te verbinden.

  1. Selecteer je WordPress site op het MyKinsta dashboard.
  2. Klik in de menubalk op Test en vervolgens op Open WP Admin in de rechterbovenhoek.

    Site-informatiepagina met het menu Staging en de knoppen Push-omgeving, Open WP Admin en Bezoek de site
    Pagina Site-informatie.

  3. Geef de referenties op die je hebt gebruikt bij het maken van je WordPress site.
  4. Klik op het menu Plugins in de linker navigatiebalk.
  5. Klik op Nieuwe plugin toevoegen om de WPGraphQL plugin toe te voegen.
  6. Zoek naar “WPGraphQL”, klik op Install New om de WPGraphQL plugin te installeren en klik vervolgens op Activate.

    Plugins toevoegen pagina met de WPGraphQL plugin en andere met een Install New knop ernaast
    De WPGraphQL plugin installeren.

  7. Om te testen of de WPGraphQL plugin die je hebt geïnstalleerd werkt zoals verwacht, open je het GraphQL menu op de navigatiebalk en klik je op GraphiQL IDE.
  8. Gebruik de volgende code in de GraphiQL IDE en klik linksboven op Run om de GraphQL query uit te voeren: 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Deze GraphQL query haalt op efficiënte wijze de slugs, excerpts, en titles van berichten op van de WordPress site.

    GraphQL pagina met de GraphQL query code en een run knop bovenaan
    De GraphQL query uitvoeren.

    Aan de linkerkant van de GraphiQL IDE kun je de lijst met berichten zien die de GraphQL query heeft opgeleverd. Je WordPress GraphQL endpoint is toegankelijk op https://your_wordpress_staging_url/graphql.

Astro verbinden met WordPress

Volg deze instructies om Astro met WordPress te verbinden:

  1. Maak een map met de naam graphql in de src-map van je Astro project.
  2. Maak een wordPressQuery.ts bestand in de graphql map.
  3. Gebruik de volgende code in je wordPressQuery.ts bestand. Zorg ervoor dat je https://your_wordpress_staging_url/graphql vervangt door je WordPress test URL. 
    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;
}

    Deze code definieert een interface gqlParams en een asynchrone functie wpquery die GraphQL queries naar de WordPress site mogelijk maakt.

Je site ontwikkelen met Astro en WordPress

  1. Om een nieuwe statische pagina te maken in Astro, maak je een bestand met de naam blog.astro in de map src/pages.
  2. Plak de volgende code in het nieuw aangemaakte bestand: 
    ---
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>

    Deze code demonstreert hoe je de wpquery functie kunt gebruiken om gegevens van de WordPress site op te halen met GraphQL en deze te renderen op de Astro site.

  3. Gebruik npm run dev om de lokale ontwikkelingsserver te starten en de nieuwste WordPress blogberichten op je Astro site te zien op http://localhost:4321/blog.

    Astro project toont WordPress berichten.
    Astro project toont WordPress berichten.

Om dynamische routing voor individuele blogberichten te hanteren, moet je een combinatie gebruiken van Astro’s dynamische routes en WordPress GraphQL’s query variabelen. Door de post ID of slug door te geven als een query variabele, kun je dynamisch de pagina-inhoud voor elke blogpost genereren. Dit zorgt voor een meer gepersonaliseerde gebruikerservaring op je website.

Je statische site op Kinsta deployen

Zet nu je codes over naar de Git provider van je voorkeur (Bitbucket, GitHub of GitLab). Volg vervolgens deze stappen om je statische site op Kinsta te deployen:

  1. Klik in het MyKinsta dashboard op Statische sites en dan Site toevoegen.
  2. Autoriseer Kinsta met je Git provider.
  3. Selecteer een GitHub Repository en een Standaard branch. Geef een weergavenaam op voor je statische site en selecteer Automatisch deployen bij commit. Dit schakelt de automatische implementatie in van alle nieuwe wijzigingen in de repository. Klik op Doorgaan.
  4. In het onderdeel Build instellingen vult Kinsta automatisch alle velden in. Laat alles zoals het is en klik op Site maken.
  5. Ga naar je Astro site via de URL die als domein verschijnt op de overzichtspagina van je geïmplementeerde site. Je hebt toegang tot blogberichten via https://your_kinsta_site_url/blog.

Samenvatting

Er is van alles mogelijk met Astro en WordPress. De WordPress API kan worden gebruikt om toegang te krijgen tot verschillende gegevens van je site en om unieke gebruikssituaties te creëren met Astro.

Met Kinsta’s Managed WordPress Hosting krijg je toegang tot een robuuste infrastructuur, wereldwijd CDN, Edge Caching, meerdere datacenters en features van zakelijk niveau. Dit zorgt voor een snelle en veilige omgeving voor je WordPress site.

Bovendien kun je, wanneer je frontend frameworks zoals Astro gebruikt met headless WordPress, de statische bestanden ervan gratis hosten op Kinsta’s Statische Site Hosting. Dit betekent dat je alleen betaalt voor WordPress hosting, wat de efficiëntie en kosteneffectiviteit maximaliseert.

Wat vind jij van headless WordPress en Astro? Heb je hun potentieel al onderzocht om unieke oplossingen te creëren? Deel je ervaringen in het commentsectie hieronder.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).