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.
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.
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.
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.
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 gitAls je Linux OS gebruikt, kan je NodeJS installeren met een package-installer als apt.
sudo apt update
sudo apt install nodejs gitGatsby 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-cliDe 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-wordpressGatsby 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 developJe kan deze testversie vervolgens bezoeken op http://localhost:8000.
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 buildOm 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 serveNu 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-wordpressGatsby configureren
Voeg vervolgens deze plugin 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.
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:
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.
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 template aan in de directory src. 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:
Wanneer je klikt op een link naar een bericht, dan is dit de berichtpagina, die wordt weergegeven door blog-post.js:
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.
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 gatsby-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:
Zo deploy je je Gatsby website bij Kinsta
Naast WordPress Hosting biedt Kinsta Applicatie Hosting, Database Hosting en Statische Site Hosting. Je kunt tot 100 statische sites gratis hosten!
Om je site te deployen met Statische Site Hosting, push je eerst je code naar een Git provider van je voorkeur (Bitbucket, GitHub of GitLab) en volg dan deze stappen om het te deployen:
- Login of maak een account aan om je MyKinsta dashboard te bekijken.
- Autoriseer Kinsta met je Git provider.
- Klik op Statische sites in de linker zijbalk, klik dan op Site toevoegen.
- Selecteer de repository en de branch waarvan je wilt deployen.
- Geef je site een unieke naam.
- Voeg de build instellingen toe in het volgende format:
- Build commando:
npm run build - Node versie:
18.16.0 - Publish directory:
public
- Build commando:
- Klik ten slotte op Site maken.
Samenvatting
De beslissing nemen om je WordPress site om te zetten naar een statische site en te profiteren van Gatsby kan een uitdaging zijn. Om te slagen, moet je de volgende stappen uitvoeren:
- Gatsby installeren om een starterssite te bouwen
- Gatsby verbinden met de WordPress-bron middels GraphQL
- Templates maken voor blogberichten
- Al je afbeeldingen vanuit WordPress importeren
- De tijdstempel “laatst gewijzigd” weergeven vanuit WordPress
Nu is het jouw beurt: Heb jij al kunnen spelen met Gatsby? Wat vond je ervan? Laat het ons weten in de reacties!
Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!
Laat een reactie achter