Deployér et statisk WordPress-site til Kinsta gratis

WordPress er et fremragende Content Management System (CMS). Vi kan opnå næsten hvad som helst med det. På grund af dets dynamiske natur kan vi ændre alt indhold med et klik på en knap. Og selvom det er fantastisk, indebærer det også nogle farer, og det kan blive svært at vedligeholde under tung trafik.

At konvertere din WordPress-hjemmeside til statisk kan løse disse problemer.

Hvad er statiske hjemmesider?

For at forklare, hvordan statiske hjemmesider fungerer, er vi først nødt til at forstå, hvordan dynamiske hjemmesider fungerer.

Hver gang vi besøger en hjemmeside, skal serveren analysere PHP-filer, forespørge databasen for at hente data og til sidst returnere den gengivne HTML til browseren.

Statiske hjemmesider gør alt det tunge arbejde først – før vi besøger hjemmesiden, gemmer vi hver side som statisk HTML. Når vi besøger den ønskede side, serverer serveren den, som den er.

Fordelene ved at gå statisk

Hastighed og ydeevne

Statiske hjemmesider er hurtige og performante. Hvorfor er de det? Fordi de bare er statisk HTML. Det betyder, at serveren kun skal gøre én ting – servere hjemmesiden. Den behøver ikke at parse noget eller vente på data fra databasen.

Statiske hjemmesider er også nemmere at hoste på CDN’ er (selvom Edge Cache fungerer på samme måde), som placerer alle filerne så tæt på dig som muligt.

Alt i alt – statiske hjemmesider klarer sig forbløffende godt under tung trafik.

Sikkerhed

WordPress’ kerne er sikker – det er den virkelig. Men plugins og temaer – ikke altid. Alle kan også prøve at gætte vores login og password.

Overordnet set kan jeg godt lide at sammenligne WordPress med et hus med mange døre og vinduer. Det er op til os at vælge de mest sikre, men hvis én dør ikke er sikker nok, kan en hacker stadig hacke vores hjemmeside.

Hvis du konverterer din hjemmeside til statisk, fjerner du de fleste angrebsvektorer. Fordi det bare er HTML, vil en hacker ikke kunne bruge sårbare plugins eller drage fordel af et svagt password.

Ro i sindet

En typisk WordPress-opsætning består af mange bevægelige dele – PHP- og databaseservere, temaer eller plugins – og hver del kan gå i stykker. Med statisk fjerner vi de fleste af dem. Vores server bliver mere ligetil, da den kun serverer HTML, og vores indhold er spredt over hele verden takket være CDN, hvilket gør det DDoS-beskyttet.

Som et resultat er sandsynligheden for, at noget går i stykker, meget mindre end normalt.

Ulemperne ved at konvertere til statisk

Løsninger

Vi er vant til, at ting som at søge på hjemmesiden, tilføje kommentarer eller sende formularer fungerer uden videre med WordPress. Med statisk er det ikke så enkelt længere. Fordi vi konverterede alt til HTML, mistede vi disse muligheder.

Vi er nødt til at bruge nogle tredjepartsværktøjer for at tilføje denne funktionalitet igen.

Byggeprocessen

Vi er vant til, at det nye indhold er tilgængeligt på vores hjemmeside, når vi trykker på udgiv-knappen. Med den statiske tilgang skal vi konvertere vores hjemmeside, hver gang vi ønsker at opdatere den. Så det kan tage et par minutter, fra vi trykker på knappen, til det er tilgængeligt for alle.

Indledende trin

Før vi går i gang, er der nogle ting, vi skal have styr på.

1. Opret et Git-repository

Vi bruger GitHub i dette eksempel, men du kan bruge en hvilken som helst anden Git-løsning (som GitLab eller BitBucket). Lige nu skal du bare oprette en konto (hvis du ikke allerede har en) og oprette et tomt repository.

Herefter skal vi oprette en fil i depotet; ellers vil vi ikke kunne forbinde det til Kinsta.

2. Forbind dette depot med statisk webstedshosting

Gå til MyKinsta, vælg statiske sider fra sidepanelet, og vælg Tilføj side.

Vælg det repository, du har oprettet, og glem ikke at vælge “Automatic deployments on commit.”

Konverter dit WordPress-websted til statisk

Vi kan bruge et par metoder til at konvertere vores WordPress-websted til statisk. I denne artikel gennemgår vi to af dem:

1. Brug af et WP-plugin og Git
2. Brug af WP-CLI, CI/CD og Git

Brug af et plugin og Git

Krav:

• Et GitHub-repository.
• WordPress Simply Static-plugin (gratis version).

Trin

1. Åbn din hjemmeside i browseren, og installer Simply Static-pluginet.
2. Gå til Simply Static > Settings > Deployment for at indstille implementeringsmetoden til Local directory og indstil den lokale mappe – du kan følge det tip, pladsholderen giver dig, for eksempel /www/kinstaapi_533/public/public_static. Husk, at pluginet ikke opretter denne mappe for dig – du skal gøre det manuelt.

3. Tryk på knappen Generate Static Files .

Efter et par minutter vil alle dine statiske filer være i den mappe, der blev angivet i det foregående trin.

Skub din kode til et Git-repository

1. Opret et repository i GitHub.
2. Åbn en terminal eller Powershell, gå til mappen med de statiske filer, og 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

Disse kommandoer forbinder depotet og skubber alle de statiske filer til GitHub. Pushing af ændringerne udløser en automatisk implementering, fordi vi allerede har forbundet dette depot med Kinstas Statisk Site Hosting.

Næste gang du ændrer noget i din WordPress, skal du genopbygge hele hjemmesiden og køre:

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

Pro-versionen af Simply Static tilbyder en GitHub addon, der automatiserer byggeprocessen. Det er dog et betalt plugin, og i nogle tilfælde kan det være en god nok løsning at gøre det manuelt.

Brug af WP-CLI, CI/CD og Git

Denne metode bruger det samme WP-plugin som metoden ovenfor, men i sin Premium-version (betalt), og bruger en CI/CD-pipeline fra Buddy CI til at skubbe din kode til et GitHub-repository.

Denne tilgang er mere kompliceret at sætte op, men kræver mindre manuelt arbejde under hver udrulning. Den er også mere udvidelig, da du har kontrol over hvert trin. Du kan tilføje flere handlinger til pipelinen, hvis du ønsker det.

Krav:

• Simply Static Pro (kun Pro-versionen har WP-CLI-integration).
• Din hjemmeside skal være offentligt tilgængelig (så den kan ikke være på en localhost), og serveren kræver SSH-adgang og WP-CLI installeret. Kinsta WordPress-hosting passer perfekt.
• Dit websteds kodebase er hostet i et GitHub-arkiv

• Et CI/CD-værktøj til at orkestrere det hele. Vi bruger Buddy i dette eksempel på grund af dets venlighed og enkelhed. Men du kan bruge ethvert andet værktøj, såsom GitHub Actions eller GitLab CI/CD.

Trin for trin:

1. Åbn din WP-hjemmeside i din browser, og installer Simply Static Pro-pluginet.
2. Gå til Simply Static > Settings > Deployment for at indstille implementeringsmetoden til Local directory og indstil den korrekte sti – du kan følge det tip, som pladsholderen giver dig, for eksempel /www/kinstaapi_533/public/public_static.
3. Husk, at pluginet ikke opretter denne mappe for dig – du skal gøre det manuelt.
4. Gå til dit GitHub-repositorium, og opret et adgangstoken med skriveadgang til dine repositorier. Vi får snart brug for det.
5. Log ind på din konto på Buddy, tilføj et nyt projekt, og forbind det med dit repository.

Lad os oprette en pipeline på Buddy, der gør følgende:

1. Kører Simply Static WP-CLI-kommandoen via SSH på din server.
2. Zipper alt.
3. Downloader det til Buddys filsystem.
4. Unzipper alt.
5. Skubber alt til dit Git-repository.

1. Først skal vi tilføje en handling kaldet SSH-kommando.
2. Kør inde i fanen Kør CMD’ er:

wp simply-static run
cd public_static
zip -FSr ../static.zip .

Dette script konverterer vores hjemmeside til statisk og zipper den.

3. I fanen Target skal du indtaste alle dine legitimationsoplysninger (find dem på MyKinsta) og indstille arbejdsmappen til public.

4. Tilføj derefter en Local Shell-handling. Inde i den skal du køre:

rm -rf *

Denne kommando sikrer, at der ikke er nogen filer, vi ikke har brug for.

5. For at downloade zip-filen fra serveren skal du tilføje en ny handling (det kan du gøre ved at trykke på + på listen over handlinger) og vælge SFTP Download fra listen. Ud over legitimationsoplysningerne skal vi angive stien til zip-filen og markere indstillingen Overskriv.

6. Tilføj endnu en Local Shell-handling for at pakke alle filer ud og fjerne zip-filen (vi har ikke brug for den længere). Kør:

unzip -o static.zip
rm static.zip

7. Gå til fanen Ubuntu, og vælg Pakker og værktøjer, installer unzip. For at gøre det skal du køre:

apt-get update && apt-get install -y unzip

8. Det sidste trin kræver, at du bruger Git Push-handlingen. Du skal bruge det GitHub Access Token, du konfigurerede i det første trin, og dets adgangskode. Glem heller ikke at tjekke Force Push og Push revision til den specifikke branch.

Når du vil redeploye din hjemmeside, skal du trykke på knappen
Kør i Buddy, og sæt gang i magien. Hvis du gerne vil automatisere denne proces, er der et plugin til WordPress, du kan bruge.

Takket være Buddys dokumentation kan du se, hvordan du kan automatisere din arbejdsgang yderligere.

Andre måder at konvertere WP til statisk på

Generatorer til statiske sider

Mange Static Site Generators kan lade dig forbinde ethvert CMS med en API (WordPress har indbygget REST API og GraphQL tilgængelig via et plugin). Du kan bruge Astro, Eleventy eller andre.

Selvom denne tilgang giver dig meget mere fleksibilitet, kræver den mere arbejde end de ovenstående løsninger.

Opsummering

Er det en god idé at konvertere et WordPress-site til et statisk site? Det kommer an på. Der er mange faktorer, du skal overveje, før du gør det. Det er helt sikkert en god idé at tænke over det. Som tidligere nævnt har statiske hjemmesider mange fordele, og det kan være et stort spild ikke at drage fordel af dem.

Maciek Palmowski

Maciek er en webudvikler, der arbejder hos Kinsta som Development Advocate Analyst. Efter timer bruger han det meste af sin tid på at kode, forsøge at finde interessante nyheder til sine nyhedsbreve eller drikke kaffe.