Hoe ziet een typische dynamische website eruit, zoals bijvoorbeeld een die op WordPress draait? Dat ziet er ongeveer zo uit: wanneer een bezoeker een URL invoert in een browser of je website via een link bezoekt, dan wordt er een verzoek verzonden naar je webserver.

De server verzamelt vervolgens alle benodigde gegevens door middel van database-query’s en genereert een HTML-bestand waarmee jouw browser de site kan tonen. Een alternatief zijn statische sites die de responses al opgeslagen hebben. Deze bestanden kunnen dus rechtstreeks aan de bezoeker worden geleverd.

Generators voor statische sites bestaan al langer, maar ze zijn de laatste tijd in populariteit toegenomen. In deze stapsgewijze handleiding kijken we naar de integratie van WordPress met Gatsby, een tool die statische sites genereert.

Wat is Gatsby?

WordPress maakt dynamische websites en om dit voor elkaar te krijgen wordt er gebruik gemaakt van de stack van PHP, MySQL en Apache of Nginx. Toch is het ook met WordPress mogelijk om een statische versie te creëren door voor alle content van je site een lijst met HTML-pagina’s te genereren.

Deze statische versie van WordPress wordt headless WordPress of serverloze WordPress genoemd. Dit conversieproces wordt slechts één keer uitgevoerd, zodat dezelfde pagina aan meerdere bezoekers kan worden getoond. Maar hoe converteer je je WordPress-site naar een statische versie? Dit is waar Gatsby ten tonele verschijnt.

Gatsby, of ook wel GatsbyJS, is een generator voor statische sites die is gebouwd met ReactJS en wordt aangedreven door GraphQL. Met Gatsby kan iedereen feature-rijke, boeiende websites en applicaties maken. Gatsby haalt via GraphQL uit verschillende bronnen van je site gegevens op, waaronder bestaande websites, API-oproepen en platte bestanden. Vervolgens maakt de tool de statische sites op basis van door jou opgegeven configuratie-instellingen.

Gatsby bestaat nog maar een jaar, maar heeft toch inmiddels al een grote schare gebruikers. Verschillende instellingen en freelancers maken namelijk al gebruik van Gatsby. De homepagina van de Data Science and Engineering Blog van Airbnb draait op Gatsby – ook al zijn de blogartikelen zelf gehost op Medium.

Engineering & Data Science Blog van Airbnb

Engineering & Data Science Blog van Airbnb

Braun is een merk van het consumentengoederenbedrijf P&G. Hun Canadese site wordt gehost met Gatsby, terwijl de zoekfunctie van de site wordt aangedreven door React.

De Canadese website van Braun

De Canadese website van Braun

Ook gebruiken een aantal freelance ontwikkelaars Gatsby voor hun portfolio’s. Portfolio’s, zoals die van Jacob Castro, bevatten voornamelijk statische content met links naar andere projecten en een contactformulier. Hierdoor zijn ze uiterst geschikt om als statische site gepresenteerd te worden.

Portfolio van Jacob D. Castro

Portfolio van Jacob D. Castro

Waarom zou je Gatsby gebruiken?

Snelle websites: het belangrijkste voordeel van het bouwen van een statische website met Gatsby is snelheid, een metriek die veel webmasters proberen te optimaliseren sinds Google verkondigde dat het een factor is binnen hun zoekmachinerankings. Laadtijden hebben daarnaast invloed op het aantal paginaweergaven en de conversiepercentages. Naar schatting kan een vertraging van één second in de laadtijd van een site leiden tot een vermindering van het aantal conversies met 7%.

Beveiliging: Ook zorgt een statische site voor betere beveiliging. Omdat het slechts statische bestanden zijn die worden geleverd, kan er ook niet veel aan gehackt worden. Bovendien kan je de statische bestanden altijd opnieuw genereren als ze verloren gaan.

Serverkosten: Voor het hosten van een dynamische site moet je server compatibel zijn met je technologiestack. Daarentegen kan je een statische site op vrijwel elke server hosten, wat de bijbehorende hostingkosten sterk vermindert.

Het (opnieuw) genereren van een statische site met Gatsby vereist wel het gebruik van JavaScript, maar dit kan je ook op een lokale machine doen waarna je de statische bestanden kopieert naar de site.

Waarom zou je Gatsby vermijden?

Ondersteunt geen dynamische content: Als je Gatsby wil gebruiken, moet je opnieuw nadenken over hoe je dynamische content wil beheren en tonen. Met andere woorden, je moet een hybride oplossing bedenken tussen statisch/dynamisch (meer hierover verder in het artikel).

Opmerkingen kunnen bijvoorbeeld extern gehost worden middels een dienst als Disqus.

Contactformulieren moeten ook worden omgeleid via een externe partner zoals Google Forms. Simpel gezegd verlies je dus rechtstreekse controle over dergelijke dynamische content, omdat de antwoorden niet op je servers worden opgeslagen.

Frequente builds zijn onhandig: Statische sites kennen het probleem van frequente reconverts. Elke wijziging die je op je site doorvoert, is slechts zichtbaar nadat je de pagina’s opnieuw hebt gegenereerd en opnieuw naar de server hebt geüpload.

Vereiste technische expertise: Gatsby stoelt op ReactJS en GraphQL. Daarom is enige kennis van JavaScript en een globaal idee van GraphQL nodig om een website via Gatsby onderhouden.

Statische websites zijn een goede keuze als je op zoek bent naar een goedkope oplossing met een hoge mate van veiligheid. Denk hierbij aan portfoliowebsites voor freelancers en sites met productdemo’s.

Ben je van mening dat de voordelen opwegen tegen de nadelen? Goed! Dan gaan we nu proberen om Gatsby in te stellen voor integratie met onze WordPress-site.

We gebruiken in deze tutorial de meest recente versie van Gatsby en is te vinden op GitHub

Stap 1: Gatsby opzetten

In dit gedeelte kijken we naar hoe we Gatsby kunnen installeren en hoe we een eenvoudige statische site maken met Gatsby.

Vereisten

De eerste stap om Gatsby aan de praat te krijgen is het controleren van de vereisten. Gatsby wordt bediend via npm, de package-installer van NodeJS. Om die reden is het zaak dat je binnen je omgeving beschikt over NodeJS en npm voordat je Gatsby kan installeren. Daarnaast moet je Git hebben geïnstalleerd, het broncodebeheersysteem.

Info

Momenteel host Kinsta geen NodeJS-servers en moet je deze dus elders opstellen. Desondanks kan je Kinsta gebruiken voor je WordPress-installatie en de gegevens ophalen met de REST API of GraphQL.

Als je Windows gebruikt, kan je NodeJS en Git installeren via het installatieprogramma op de downloadpagina. Op een Mac kan je hun installatieprogramma’s downloaden of homebrew gebruiken.

brew install nodejs
brew install git

Als je Linux OS gebruikt, kan je NodeJS installeren met een package-installer als apt.

sudo apt update
sudo apt install nodejs git

 Gatsby installeren

Zodra je NodeJS en Git hebt geïnstalleerd, ben je klaar om Gatsby te installeren! De makkelijkste manier is om de volgende opdracht in de terminal uit te voeren (gebruik de npm-opdrachtregel in Windows):

npm install -g gatsby-cli

De installer installeert als eerste de dependency’s en daarna Gatsby. Nu ben je klaar om je eerste Gatsby site te maken!

Je Gatsby site bouwen en uitzetten

Voer de volgende opdracht uit om een Gatsby site te maken.

gatsby new gatsby-wordpress

Gatsby maakt nu een site aan in de directory /gatsby-wordpress door het Gatsby startertemplate te klonen. Je kan je eigen startertemplate opgeven om te klonen. Zodra het klonen is voltooid en de dependency’s zijn geïnstalleerd, kan je met de volgende opdracht een testversie van je site uitvoeren.

cd gatsby-wordpress
gatsby develop

Je kan deze testversie vervolgens bezoeken op http://localhost:8000.

Gatsby startersite

Gatsby startersite

De laatste stap is het bouwen van je statische site. De volgende opdracht creëert de statische bestanden in de openbare map. Om deze naar de server te uploaden, upload je simpelweg de inhoud van deze map naar de hoofdmap van je server. Eventueel kan je een pad-prefix toevoegen, zoals www.voorbeeld.nl/blog/ toevoegen als root-URL van je builds.

gatsby build

Om zelf een lokale HTML-server op te starten waarmee je de statische content van je site kan laten zien, moet je de serve opdracht gebruiken. Houd er rekening mee dat deze alleen werkt ná het uitvoeren van de build opdracht.

gatsby serve

Nu je je eigen eenvoudige statische site hebt gemaakt met Gatsby, kunnen we deze integreren met WordPress.

Stap 2: Hoe Gatsby met WordPress te verbinden

In dit gedeelte gaan we je WordPress-site integreren met Gatsby. Je wil zorgen dat Gatsby het adres van je WordPress-blog weet, zodat het de meest recente data kan onttrekken van je server wanneer je met je testserver bezig bent of statische pagina’s genereert.

Het verbinden van Gatsby met WordPress heeft als doel om je WordPress data op te halen. Dit wordt geactiveerd door een build. Zodra Gatsby de WordPress gegevens heeft opgehaald, wordt de statische site opgesteld op basis van de huidige template.

In dit proces wordt de WordPress site gebruikt als een bron voor de berichten op Gatsby. Om deze uitwisseling mogelijk te maken, moet je de WordPress-plugin van Gatsby installeren middels de volgende opdracht:

npm install gatsby-source-wordpress

Gatsby configureren

Voeg vervolgens deze plug-in toe aan het configuratiebestand van Gatsby, genaamd gatsby-config.js.

Voeg vervolgens de volgende code toe aan het bestand om Gatsby te verbinden met je WordPress-bron. In dit voorbeeld gebruiken we een lokaal gehoste WordPress-site op MAMP. Overigens wil je misschien de titel en beschrijving van de site in siteMetadata bewerken.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Berichten ophalen met GraphQL

Nu we de bron van de WordPress-site hebben opgegeven in het configuratiebestand, is het tijd om te specificeren welke data van de WordPress-site kunnen worden geëxtraheerd. Gatsby gebruikt GraphQL, een open source querytaal voor API’s, om grote aantallen WordPress-berichten te ontvangen.

Om te kijken welke gegevens je wil opvragen, kan je interactief de content selecteren die je uit WordPress wil ophalen. Start de testserver en ga naar de URL http://localhost:8000/___graphql om de GraphQL-editor te openen.

Gegevens opvragen met GraphQL

Gegevens opvragen met GraphQL

Wanneer je weet welke content je wil gebruiken, kan je de GraphQL-query’s toevoegen aan het bestand index.js.

Laten we voorlopig alleen de titel en het excerpt van elk bericht gebruiken. We kunnen later meer velden toevoegen.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (

Posts

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Als je nu de testsite bezoekt, dan zie je (als je alles goed hebt gedaan) dat alle berichten van WordPress zijn opgehaald en kan je hun titels en excerpten zien:

Homepagina Gatsby met WordPress-berichten

Homepagina Gatsby met WordPress-berichten

Mooi is anders, maar het is ons wel gelukt om de juiste gegevens van WordPress te halen. De volgende stap is om voor elk bericht een eigen pagina te maken.

Stap 3: Een basis paginatemplate maken

In dit gedeelte gaan we kijken hoe je in Gatsby voor elk bericht een aparte pagina maakt en via de slug links naar deze artikelen toevoegt.

Voor elk bericht een eigen pagina maken

De eerste stap na het ophalen van alle berichten uit onze WordPress-bron is om Gatsby de opdracht te geven om voor elk bericht een eigen pagina te maken. Dit is een handeling die we kunnen uitvoeren met de actie createPage.

Voeg de volgende code toe aan gatsby-node.js. Merk op dat we bovendien de content, auteur, datum en slug van elk bericht ontvangen:

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: {fields: [date]}) {
        edges {
          node {
            title
            excerpt
            slug
            date(formatString: "MM-DD-YYYY")
            author {
              name
            }
          }
        }
      }
    }

  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        // Decide URL structure
        path: node.slug,
        // path to template
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug,
        },
      })
    })
  })

Nadat de data vanuit GraphQL is opgehaald, maakt deze code een pagina aan voor elk bericht. Binnen het bericht kan je de URL-structuur van de pagina opgeven op basis van de slug die het pad gebruikt.

Moe van langzame hosting van je WordPress-site? Wij leveren razendsnelle servers en 24/7 support van wereldklasse van WordPress-experts. Bekijk onze pakketten.

Als alternatief kan je de ID van het bericht ophalen en dat in de URL opgeven. De componentvariabele verwijst naar de template van hoe je het bericht wil weergeven. Ten slotte geven we de slug door als de context van de template. Dit is vereist om de template te laten zoeken naar het juiste bericht uit de lijst met opgehaalde berichten.

In het ideale geval geef je een variabele door die een bericht uniek identificeert als context.

Herstart de testserver na het maken van de wijzigingen in het bestand gatsby-node.js zodat de wijzigingen van kracht worden.

Een template aanmaken om een bericht weer te geven

Maak een directory aan in de directory src en noem deze templates. Maak een nieuw bestand aan in deze nieuwe directory, noem deze blog-post.js en voer de volgende code in:

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.allWordpressPost.edges[0].node
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <p> By: {post.author.name} </p>
        <p> On: {post.date} </p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    allWordpressPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          title
          content
          slug
          date(formatString: "MM-DD-YYYY")
          author {
            name
          }
        }
      }
    }
  }

De GraphQL-query bemachtigt de datum en de naam van de auteur, welke worden weergegeven aan het einde van het bericht. Met de GraphQL-editor kan je extra velden toevoegen en deze op de berichtpagina laten zien.

Naar de pagina’s linken in index

Je hebt nu voor elk bericht een aparte pagina gemaakt. We moeten echter nog de links naar deze berichten toevoegen aan de indexpagina Ga naar index.js en wijzig de code om een link naar elk bericht toe te voegen:

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <Link to={node.slug}>
            <p>{node.title}</p>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }

Dit is de status van de indexpagina:

Indexpagina na het toevoegen van links naar berichten

Indexpagina na het toevoegen van links naar berichten

Wanneer je klikt op een link naar een bericht, dan is dit de berichtpagina, die wordt weergegeven door blog-post.js:

Bericht met titel, inhoud, datum publicatie en auteur

Bericht met titel, inhoud, datum publicatie en auteur

Stap 4: Geavanceerde migratietaken

We hebben nu alle WordPress-berichten geïmporteerd, maar we zijn er nog niet. Laten we een paar geavanceerde taken uitvoeren om ervoor te zorgen dat je in de toekomst niet tegen problemen aanloopt. In deze sectie gaan we kijken hoe we efficiënt met afbeeldingen kunnen omgaan en een “laatst gewijzigd op”-tijdstempel aan de data kunnen toevoegen.

Conversies van het afbeeldingspad

Een van onze oorspronkelijke berichten, genaamd “Post with Image!” bevatte een afbeelding. Als je naar de bijbehorende pagina op Gatsby gaat, zie je dat de afbeelding wordt weergegeven, maar ook dat de bron van de afbeelding hetzelfde is als die van WordPress. In dit voorbeeld verwijst het dus naar de lokaal gehoste WordPress-afbeelding.

Gatsby-bericht met een afbeelding en de bron

Gatsby-bericht met een afbeelding en de bron

Als je afbeeldingen extern host, dan zorgt dit niet per se voor problemen, omdat het naar de server van je afbeeldingen verwijst. Als je de afbeeldingen echter opslaat binnen je WordPress-installatie, dan wil je ook de bijbehorende afbeeldingen!

Je kan dit oplossen met de plugin inline images. Installeer eerst de plugin

gatsby-image en vervolgens gatsby-wordpress-inline-images.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

Voeg vervolgens de volgende regels toe aan het bestand gastby-config.js.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

Als je de testserver opnieuw opstart nadat je deze wijzigingen hebt aangebracht, dan worden de afbeeldingen van de WordPress-site gedownload en lokaal opgeslagen. Je kan dit verifiëren via het pad van de eerdergenoemde afbeelding.

Datum “laatst gewijzigd” weergeven

Als je een blog beheert waarin regelmatig bewerkingen plaatsvinden, dan kan je overwegen om je lezers te laten weten wanneer een bericht voor het laatst is bijgewerkt. In de eerdergenoemde GraphQL-query haalden we weliswaar ook de “created date” op, maar in deze sectie leg ik je uit hoe je daarnaast ook de tijdstempel van “last modified” ophaalt.

Om de tijdstempel van laatst gewijzigd van WordPress naar je Gatsby-bericht te exporteren, moet je een veld toevoegen aan je lijst met items in de GraphQL-query. Omdat het een tijdstempel is zoals date, moet je ook de parameter formatString toevoegen. Dit is het aangepaste bestand blog-post.js:

...
<Layout>
  <div>
    ...
    <p> On: {post.date} </p>
    <p> Last modified: {post.modified} </p>
  </div>
</Layout>
...

export const query = graphql`
  query($slug: String!) {
  {
    allWordpressPost {
      edges {
        node {
          ...
          modified(formatString: "MM-DD-YYYY")
        }
      }
    }
  }

Nadat je bovenstaande hebt toegevoegd, kan je de tijdstempel “laatst gewijzigd” zien op de berichtenpagina op Gatsby:

Bericht met de tijdstempel laatst gewijzigd

Bericht met de tijdstempel laatst gewijzigd

Iedereen heeft het over #Gatsby.. maar wat is het nou eigenlijk? 🤷♂️ In deze uitgebreide tutorial leer je hoe je razendsnelle websites maakt met Gatsby + WordPress! 🕴🚀Click to Tweet

Samenvatting

Het kan een hele uitdaging zijn om met Gatsby je WordPress-site te converteren naar een statische site. Toch hoeft het niet heel moeilijk te zijn, als je de volgende stappen uitvoert:

Nu is het jouw beurt: Heb jij al kunnen spelen met Gatsby? Wat vond je ervan? Laat het ons weten in de reacties!


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten