WordPress is een uitstekend Content Management System (CMS). Je kan er bijna alles mee doen en omdat het dynamisch is, kunnen we alle content met één druk op de knop veranderen. En hoewel dit fantastisch is, brengt het ook gevaren met zich mee en kan het moeilijk te onderhouden wanneer er veel mensen tegelijkertijd naar je site komen.
Het omzetten van je WordPress website naar een statische website kan deze problemen oplossen.
Wat zijn statische websites?
Om uit te leggen hoe statische websites werken, moeten we eerst begrijpen hoe dynamische websites werken.
Elke keer dat we een website bezoeken, moet de server PHP bestanden ontleden, de database raadplegen om de gegevens op te halen en uiteindelijk de gerenderde HTML terugsturen naar de browser.
Statische websites doen al het zware werk eigenlijk al van tevoren – dus nog voordat we de website bezoeken, slaan we elke pagina op als statische HTML. Wanneer we de gewenste pagina bezoeken, levert de server de site dus af zoals hij is.
De voordelen van statische websites
Snelheid en prestaties
Statische websites zijn snel en presteren goed. Waarom? Omdat het niets meer dan statische HTML is. Dit betekent dat de server maar één ding hoeft te doen: de website afleveren. Hij hoeft niets te parsen of te wachten op gegevens uit de database.
Statische websites zijn bovendien gemakkelijker te hosten op CDN’s (hoewel Edge Cache vergelijkbaar werkt), die alle bestanden zo dicht mogelijk bij jou in de buurt plaatsen.
Over het geheel genomen presteren statische websites verbazingwekkend onder druk verkeer.
Beveiliging
De core van WordPress is veilig – echt waar. Maar de plugins en thema’s – niet altijd. Ook kan iedereen proberen onze login en wachtwoord te raden.
In het algemeen vergelijk ik WordPress graag met een huis met veel deuren en ramen. Het is aan ons om het veiligste huis te kiezen, maar toch, als één deur niet veilig genoeg is, kan een hacker onze website hacken.
Door je website statisch te maken, verwijder je de meeste aanvalsingangen. Omdat het simpelweg uit HTML bestaat, kan een hacker geen kwetsbare plugins gebruiken of profiteren van een zwak wachtwoord.
Gemoedsrust
Een typische WordPress setup bestaat uit veel bewegende delen – PHP- en databaseservers, thema’s of plugins – en elk onderdeel kan stuk gaan. Door onze site statisch te maken, verwijderen we de meeste. Onze server wordt eenvoudiger omdat hij alleen HTML levert en onze inhoud wordt wereldwijd verspreid dankzij CDN, waardoor hij meteen beschermd is tegen DDoS.
Daardoor is de kans dat er iets kapot gaat veel kleiner dan normaal.
De nadelen van converteren naar statisch
Workarounds
We zijn gewend dat dingen als zoeken op de website, het toevoegen van comments of het versturen van formulieren out-of-the box werken binnen WordPress. Met statisch is dat niet meer zo eenvoudig. Omdat we alles hebben omgezet naar HTML, zijn we die mogelijkheden kwijtgeraakt.
We moeten een aantal externe tools gebruiken om deze functionaliteit weer toe te voegen.
Bouwproces
We zijn gewend dat de nieuwe inhoud beschikbaar is op onze website nadat we op de knop voor publiceren hebben gedrukt. Met de statische aanpak moeten we onze website converteren wanneer we hem willen bijwerken. Het kan dus een paar minuten duren tussen het drukken op de knop en het beschikbaar zijn voor iedereen.
Inleidende stappen
Voordat we beginnen, moeten we een aantal dingen regelen.
1. Een Git repository aanmaken
We gebruiken GitHub in dit voorbeeld, maar je kunt elke andere Git oplossing gebruiken (zoals GitLab of BitBucket). Maak voor nu een account aan (als je er nog geen hebt) en maak een lege repository.
Hierna moeten we een bestand aanmaken in de repo; anders kunnen we het niet verbinden met Kinsta.
2. Deze repository instellen bij Statische Site Hosting
Ga naar MyKinsta, selecteer Statische sites in de zijbalk en selecteer Voeg statische site toe.
Selecteer de repository die je hebt gemaakt en vergeet niet om “Automatische deployment bij commit” te selecteren
Je WordPress website omzetten naar statisch
We kunnen een paar methoden gebruiken om onze WordPress site statisch te maken. In dit artikel bespreken we er twee:
- Een WP plugin en Git gebruiken
- WP-CLI, CI/CD en Git gebruiken
Een plugin en Git gebruiken
Vereisten:
- Een GitHub repository.
- De WordPress Simply Static plugin (gratis versie).
Stappen
- Open je site in de browser en installeer de Simply Static plugin.
- Ga naar Simply Static > Settings > Deployment om de deployment methode in te stellen op de Local directory en stel de lokale map in – je kunt de tip volgen die de placeholder je geeft, bijvoorbeeld /www/kinstaapi_533/public/public_static. Onthoud dat de plugin deze map niet voor je aanmaakt – dat moet je handmatig doen.
- Druk op de knop Generate static files.
Na een paar minuten staan al je statische bestanden in de map die je in de vorige stap hebt opgegeven.
Je code naar een Git Repository pushen
- Maak een repository aan in GitHub.
- Open een Terminal of Powershell, ga naar de map met de statische bestanden en voer uit:
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin mainDeze commando’s verbinden de repository en pushen alle statische bestanden naar GitHub. Het pushen van de wijzigingen zorgt voor een automatische implementatie omdat we deze repository al hebben verbonden met Kinsta’s Statische Site Hosting.
De volgende keer dat je iets verandert in je WordPress, bouw je de hele website opnieuw op en voer je de opdracht uit:
git add .
git commit -m "static content"
git push --force -u origin mainDe Pro versie van Simply Static biedt een GitHub addon die het bouwproces automatiseert. Toch is het een betaalde plugin, en in sommige gevallen kan het handmatig doen een goede oplossing zijn.
WP-CLI, CI/CD en Git gebruiken
Deze methode gebruikt dezelfde WP plugin als de methode hierboven, maar dan in de Premium (betaalde) versie, en gebruikt een CI/CD pipeline van Buddy CI om je code naar een GitHub repository te pushen.
Deze aanpak is ingewikkelder om op te zetten, maar vereist minder handmatig werk tijdens elke deployment. Het is daarnaast beter uitbreidbaar omdat je controle hebt over elke stap. Je kunt meer acties aan de pipeline toevoegen als je dat wilt.
Vereisten:
- Simply Static Pro (alleen de Pro versie heeft de WP-CLI integratie).
- Je website moet publiek toegankelijk zijn (dus niet op een localhost) en de server moet SSH toegang hebben en WP-CLI moet geïnstalleerd zijn. Kinsta WordPress Hosting past hier perfect bij.
- De codebase van je site is gehost in een GitHub repository
- Een CI/CD tool om alles te orkestreren. In dit voorbeeld gebruiken we Buddy vanwege zijn gebruiksvriendelijkheid en eenvoud. Maar je kunt elke andere tool gebruiken, zoals GitHub Actions of GitLab CI/CD.
Stappen:
- Open je WP site in je browser en installeer de Simply Static Pro plugin.
- Ga naar Simply Static > Settings > Deployment om de deployment methode in te stellen op de Local directory en stel het juiste pad in – je kunt de tip volgen die de placeholder je geeft, bijvoorbeeld /www/kinstaapi_533/public/public_static.
- Onthoud dat de plugin deze map niet voor je aanmaakt – je moet het handmatig doen.
- Ga naar je GitHub repository en maak een toegangstoken met write om toegang te krijgen tot je repositories. Die hebben we straks nodig.
- Log in op je account op Buddy, voeg een nieuw project toe en verbind het met je repository.
Laten we een pipeline aanmaken op Buddy die het volgende doet:
- Voert Simply Static WP-CLI commando uit via SSH op je server.
- Zipt alles in.
- Downloadt het naar het Buddy bestandssysteem.
- Pakt alles uit.
- Pusht alles naar je Git repository.
- Eerst moeten we een actie genaamd SSH command toevoegen.
- Voer op het tabblad Run CMDs uit:
wp simply-static run
cd public_static
zip -FSr ../static.zip .Dit script converteert onze website naar statisch en zipt het in.
- Voer in het tabblad Target al je referenties in (vind ze op MyKinsta) en stel de werkdirectory in op public.
- Voeg vervolgens een Local Shell actie toe. Voer daarin uit:
rm -rf *Dit commando zorgt ervoor dat er geen bestanden zijn die we niet nodig hebben.
- Om het zipbestand van de server te downloaden, voeg je een nieuwe actie toe (je kunt dat doen door op de + te drukken in de lijst met acties) en selecteer je SFTP Download uit de lijst. Naast de referenties moeten we het pad naar het zipbestand doorgeven en de optie overschrijven (overwrite) aanvinken.
- Voeg nog een Local Shell actie toe om alle bestanden uit te pakken en verwijder het zipbestand (we hebben het niet meer nodig). Uitvoeren:
unzip -o static.zip
rm static.zip- Ga naar het tabblad Ubuntu en selecteer bij Packages & Tools Install Unzip. Voer hiervoor het volgende uit:
apt-get update && apt-get install -y unzip- De laatste stap vereist het gebruik van de Git Push actie. Je moet de GitHub Access Token gebruiken die je in de eerste stap hebt geconfigureerd en het bijbehorende wachtwoord. Vergeet ook niet om Force push en Push created revision to specific branch aan te vinken.
Als je je website opnieuw wilt deployen, druk je op de Run knop in Buddy en hij zal voor je aan het werk gaan. Als je dit proces wilt automatiseren, is er een plugin voor WordPress die je kunt gebruiken.
Dankzij de documentatie van Buddy kun je nagaan hoe je je workflow verder kunt automatiseren.
Andere manieren om WP om te zetten naar statisch
Statische websitegenerators
Veel Statische sitegenerators kunnen je een CMS met een API laten verbinden (WordPress heeft een ingebouwde REST API en GraphQL beschikbaar via een plugin). Je kunt Astro, Eleventy of een ander gebruiken.
Hoewel deze aanpak je veel meer flexibiliteit geeft, vereist het meer werk dan de bovenstaande oplossingen.
Samenvatting
Is het omzetten van een WordPress site naar een statische site een goed idee? Dat hangt ervan af. Er zijn veel factoren die je moet overwegen voordat je dit doet. Het is zeker een goed idee om erover na te denken. Zoals eerder gezegd – statische websites hebben veel voordelen, en er niet van profiteren kan een enorme verspilling zijn.
Maciek is een web developer en werkt bij Kinsta als Development Advocate Analyst. Na werktijd besteedt hij de meeste tijd aan coderen, interessant nieuws zoeken voor zijn nieuwsbrieven of koffie drinken.
Laat een reactie achter