WordPress är ett utmärkt Content Management System (CMS). Vi kan åstadkomma nästan vad som helst med detta. På grund av dess dynamiska natur kan vi dessutom ändra allt innehåll med ett klick på en knapp. Men även om detta är fantastiskt, medför det även vissa faror. Det kan exempelvis bli svårt att underhålla under tung trafik.

Att konvertera din WordPress-webbplats till statisk kan lösa dessa problem.

Vad är statiska webbplatser?

För att förklara hur statiska webbplatser fungerar måste vi först förstå hur dynamiska webbplatser fungerar.

Varje gång som vi besöker en webbplats måste servern analysera PHP-filer, fråga databasen för att hämta data, och därefter returnera den renderade HTML-filen till webbläsaren.

Statiska webbplatser gör allt det tunga jobbet först – innan vi besöker webbplatsen sparar vi varje sida som statisk HTML. När vi besöker den önskade sidan serverar servern sidan som den är.

Fördelarna med att använda statiskt

Hastighet och prestanda

Statiska webbplatser är snabba och högpresterande. Undrar du varför det är så? Det beror på att de bara består av statisk HTML. Som ett resultat behöver servern bara göra en sak – servera webbplatsen. Den behöver exempelvis inte tolka något eller vänta på data från databasen.

Statiska webbplatser är dessutom lättare att hosta på CDN (även om Edge Cache fungerar på samma sätt). Alla filer placeras med andra ord så nära dig som möjligt.

Sammantaget – statiska webbplatser presterar fantastiskt under tung trafik.

Säkerhet

WordPress kärna är säker – det är den verkligen. Men plugins och teman är inte alltid lika säkra. Dessutom kan vem som helst försöka gissa sig till vår inloggning och vårt lösenord.

Jag brukar jämföra WordPress med ett hus med många dörrar och fönster. Det är upp till oss att välja de säkraste. Om en dörr inte är tillräckligt säker kan en hacker dock ändå hacka vår webbplats.

Om du konverterar din webbplats till statiskt material försvinner de flesta attack-vektorerna. Eftersom det endast är HTML kan en hackare inte använda sårbara plugins eller dra nytta av ett svagt lösenord.

Trygghet i sinnet

En typisk WordPress-installation består av många rörliga delar – PHP och databas-servrar, teman eller plugins – och varje del kan gå sönder. En statisk webbplats tar bort de flesta av dessa sårbara ytor. Vår server blir mer okomplicerad eftersom den bara serverar HTML och vårt innehåll sprids över hela världen tack vare CDN. Som ett resultat blir den DDoS-skyddad.

Sannolikheten för att något ska gå sönder är med andra ord mycket mindre.

Nackdelarna med att konvertera till statiskt

Lösningar

Vi är vana vid att saker som att söka på webbplatsen, lägga till kommentarer eller skicka formulär fungerar direkt med WordPress. Med statiskt är det inte så enkelt längre. Eftersom vi konverterade allt till HTML förlorade vi dessa möjligheter.

Vi måste med andra ord använda några tredjeparts-verktyg för att lägga till denna funktionalitet igen.

Byggprocessen

Vi är vana vid att det nya innehållet finns tillgängligt på vår webbplats efter att vi har tryckt på publicerings-knappen. Med den statiska metoden måste vi konvertera vår webbplats varje gång vi vill uppdatera den. Som ett resultat kan det ta några minuter mellan att trycka på knappen och att ha det tillgängligt för alla.

Preliminära steg

Innan vi börjar måste vi ta hand om några saker.

1. Skapa ett Git-kodförråd

Vi använder GitHub i det här exemplet, men du kan använda vilken annan Git-lösning som helst (som GitLab eller BitBucket). Just nu är det bara att skapa ett konto (om du inte redan har ett sådant) och därefter skapa ett tomt kodförråd.

Efter detta måste vi skapa en fil i kodförrådet; annars kommer vi inte att kunna ansluta den till Kinsta.

Lägg till en fil i ditt kodförråd.
Lägg till en fil i ditt kodförråd.

2. Anslut detta kodförråd till hosting av statiska webbplatser

Gå till MyKinsta, välj statiska webbplatser från sidofältet och välj Lägg till webbplats.

Välj därefter det kodförråd som du skapade och glöm inte att välja ”Automatiska distribueringar vid utförande.”

Kinsta's Hosting-installation för statisk webbplats.
Kinsta’s Hosting-installation för statisk webbplats.

Konvertera din WordPress-webbplats till statisk

Vi kan använda några metoder för att konvertera vår WordPress-webbplats till statisk. I den här artikeln går vi igenom två av dem:

  1. Använda ett WP-plugin och Git
  2. Nyttja WP-CLI, CI/CD och Git

Använda ett plugin och Git

Krav:

Steg:

  1. Öppna din webbplats i webbläsaren och installera därefter Simply Static-pluginet.
  2. Gå till Simply Static > Inställningar > Distribuering för att ställa in distribuerings-metoden till Lokal katalog och ange den lokala mappen. Du kan följa det tips som platshållaren ger dig, exempelvis /www/kinstaapi_533/public/public_static. Kom ihåg att pluginet inte kommer att skapa den här mappen åt dig – du måste göra det manuellt.
  1. Tryck på knappen Generera statiska filer .

Efter några minuter kommer alla dina statiska filer att finnas i den mapp som angavs i föregående steg.

Skicka din kod till ett Git-kodförråd

  1. Skapa ett kodförråd i GitHub.
  2. Öppna en terminal eller Powershell, gå därefter till mappen med de statiska filerna och kör:
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 main

Dessa kommandon ansluter kodförrådet och pushar alla statiska filer till GitHub. Pushning av ändringarna utlöser därefter en automatisk distribuering eftersom vi redan har anslutit detta arkiv till Kinsta’s Hosting av statiska webbplatser.

Nästa gång som du ändrar något i ditt WordPress, bygg om hela webbplatsen och kör:

git add .
git commit -m "static content"
git push --force -u origin main

Pro-versionen av Simply Static erbjuder ett GitHub-tillägg som automatiserar byggprocessen. Det är dock ett betalt plugin, och i vissa fall kan det räcka gott att göra detta manuellt.

Använda WP-CLI, CI/CD och Git

Den här metoden använder samma WP-plugin som metoden ovan, men i sin Premium-version (betald). Den nyttjar en CI/CD-pipeline från Buddy CI för att driva din kod till ett GitHub-kodförråd.

Detta tillvägagångssätt är mer komplicerat att konfigurera men kräver mindre manuellt arbete under varje distribuering. Det är dessutom mer utbyggbart eftersom du har kontroll över varje steg. Du kan exempelvis lägga till fler åtgärder i pipelinen om du vill.

Krav:

  • Simply Static Pro (endast Pro-versionen har integreringen med WP-CLI).
  • Din webbplats måste vara offentligt tillgänglig (så den kan inte vara på en localhost), och servern kräver SSH-åtkomst och WP-CLI installerat. Kinsta’s WordPress-hosting är en perfekt passform.
  • Din webbplats kodbas blir hostad i ett GitHub-kodförråd
  • Ett CI/CD-verktyg för att arrangera allt. Vi använder Buddy i det här exemplet på grund av dess vänlighet och enkelhet. Men du kan använda vilket annat verktyg som helst, exempelvis GitHub Actions eller GitLab CI/CD.

Steg:

  1. Öppna din WP-webbplats i din webbläsare och installera därefter Simply Static Pro-pluginet.
  2. Gå till Simply Static > Inställningar > Distribueringar för att ställa in distribuerings-metoden till den lokala katalogen och ställa in rätt sökväg – du kan följa tipset som platshållaren ger dig, exempelvis /www/kinstaapi_533/public/public_static.
  3. Kom ihåg att pluginet inte skapar den här mappen åt dig – du måste göra detta manuellt.
  4. Gå till ditt GitHub-kodförråd och skapa en åtkomsttoken med skrivbehörighet för att komma åt dina kodförråd. Vi kommer att behöva detta snart.
  5. Logga in på ditt konto på Buddy, lägg till ett nytt projekt och anslut det till ditt kodförråd.

Låt oss skapa en pipeline på Buddy som gör följande:

  1. Kör Simply Static WP-CLI-kommandot via SSH på din server.
  2. Zippar allt.
  3. Laddar ner det till Buddy’s filsystem.
  4. Packar upp allt.
  5. Skickar allt till ditt Git-kodförråd.

En översikt över det föreslagna arbetsflödet för Buddys.
En översikt över det föreslagna arbetsflödet för Buddys.
  1. Först måste vi lägga till en åtgärd som heter SSH-kommando.
  2. Inuti fliken Kör CMDs kör du:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Ange dina autentiseringsuppgifter

Detta skript konverterar därefter vår webbplats till statisk och komprimerar den.

  1. På fliken Mål anger du alla dina autentiseringsuppgifter (du hittar dem på MyKinsta) och anger arbetskatalogen till offentlig.

Buddy´s mål-konfiguration.
Buddy´s mål-konfiguration.
  1. Lägg därefter till en Local Shell-åtgärd. Kör inuti den:
rm -rf *

Detta kommando säkerställer att det inte finns några filer som vi inte behöver.

  1. För att ladda ner zip-filen från servern lägger du till en ny åtgärd (du kan göra detta genom att trycka på + i listan över åtgärder) och väljer SFTP Download i listan. Förutom autentiserings-uppgifterna måste vi dessutom ange sökvägen till zip-filen och markera alternativet för överskrivning.

Buddy's inställning för nedladdningsåtgärd.
Buddy’s inställning för nedladdningsåtgärd.
  1. Lägg till ytterligare en Local Shell-åtgärd för att packa upp alla filer och ta bort zip-filen (vi kommer inte att behöva den längre). Kör:
unzip -o static.zip
rm static.zip
  1. Gå till fliken Ubuntu och välj Paket & Verktyg och installera unzip. För att göra detta, kör:
apt-get update && apt-get install -y unzip
  1. Det sista steget kräver att du använder Git Push-åtgärden. Du måste använda GitHub Access Token som du konfigurerade i det första steget och dess lösenord. Glöm inte att kontrollera Force Push och Push revision till den specifika grenen.
Buddy's Push-åtgärdsinställning.
Buddy’s Push-åtgärdsinställning.

När du vill omfördela din webbplats trycker du på knappen Kör i Buddy, så kommer magin att hända. Om du vill automatisera den här processen finns det ett plugin för WordPress som du kan använda.

En översikt över det föreslagna Buddy-arbetsflödet.
En översikt över det föreslagna Buddy-arbetsflödet.

Tack vare Buddys dokumentation kan du kolla in hur du ytterligare kan automatisera ditt arbetsflöde.

Andra sätt att konvertera WP till statisk

Generatorer för statiska webbplatser

Många statiska webbplatsgeneratorer kan låta dig ansluta alla CMS med ett API (WordPress har inbyggt REST API och GraphQL tillgängligt via ett plugin). Du kan använda Astro, Eleventy, eller något annat.

Även om detta tillvägagångssätt ger dig mycket mer flexibilitet, kräver det mer arbete än ovanstående lösningar.

Sammanfattning

Är det en bra idé att konvertera en WordPress-webbplats till en statisk webbplats? Det beror på. Det finns många faktorer som du måste överväga innan du gör detta. Visst är det en bra idé att tänka på det. Som nämnts tidigare – statiska webbplatser har många fördelar, och att inte dra nytta av dem kan vara ett enormt slöseri.

Maciek Palmowski

Maciek är en webbutvecklare som arbetar på Kinsta som Development Advocate Analyst. Efter jobbet ägnar han det mesta av sin tid åt att koda, försöka hitta intressanta nyheter till sina nyhetsbrev eller dricka kaffe.