WordPress är ett kraftfullt och populärt innehållshanteringssystem, men som är värd för en dynamik WordPress webbplatsen kan vara kostsam och kräva löpande underhåll. För många enkla webbplatser eller bloggar, en statisk version av en WordPress webbplats kan vara ett utmärkt alternativ. Statiska webbplatser är snabbare, säkrare och kan hostas gratis på plattformar som GitHub Pages, Netlify eller Vercel.
I den här handledningen kommer jag att gå igenom processen att skapa en statisk version av din WordPress webbplats och värd för den gratis. Detta tillvägagångssätt är perfekt för nybörjare som vill utnyttja det användarvänliga WordPress gränssnitt för att skapa innehåll samtidigt som du drar nytta av fördelarna med en statisk webbplats.
Verktyg du behöver
Innan vi går in i processen, låt oss se till att du har alla nödvändiga verktyg. Här är en lista över allt du behöver för att vara värd för din statiska WordPress webbplats gratis:
• LocalWP: En gratis lokal WordPress utvecklingsverktyg som låter dig bygga och testa WordPress webbplatser offline.
• Helt enkelt statisk: En gratis WordPress plugin som genererar en statisk version av din WordPress plats.
• gå: Versionskontrollsystem för att spåra ändringar i dina filer. Kommer vanligtvis förinstallerat på Mac och Linux. Windows-användare kan ladda ner från git-scm.com
• GitHub Desktop: Ett användarvänligt gränssnitt för att hantera Git-förråd. Ladda ner den från: desktop.github.com
• GitHub-konto: Du behöver detta för att vara värd för ditt arkiv och använda GitHub-sidor. Registrera dig gratis på: github.com
• Hosting Platform-konto: Välj något av följande:
- GitHub-sidor (levereras med ditt GitHub-konto)
- Netify: netify.com
- Vercel: vercel.com
Innan du fortsätter med handledningen, se till att du har dessa verktyg installerade och konton inställda. Att ha allt klart kommer att göra processen smidig och okomplicerad.
Steg 1: Utveckla din WordPress Webbplats på LocalWP
Innan vi börjar måste du ha din WordPress plats redo. Om du inte har skapat din webbplats ännu, eller om den för närvarande finns någon annanstans, rekommenderar jag att du använder LocalWP (tidigare Local by Flywheel) för att utveckla och testa din webbplats lokalt.
- Ladda ner och installera LocalWP gratis från localwp.com.
- Skapa en ny WordPress webbplats i LocalWP.
- Designa din webbplats, lägg till innehåll och installera nödvändiga plugins.
- Se till att din webbplats ser ut och fungerar precis som du vill ha den i sin statiska form.
Förstå begränsningar för statisk plats
Medan statisk WordPress webbplatser erbjuder fördelar som förbättrad hastighet, säkerhet och gratis värdalternativ, det är viktigt att vara medveten om deras begränsningar. Några dynamiska egenskaper hos WordPress fungerar inte i en statisk miljö:
- WordPress Blanketter: Traditionell WordPress formulär som är beroende av bearbetning på serversidan fungerar inte. Detta inkluderar kontaktformulär, prenumerationsformulär och andra interaktiva formulär.
- WordPress Kommentarer: Dynamiska kommentarsystem som tillåter användarinteraktioner i realtid stöds inte på statiska webbplatser.
- Tillgång till administratörsområde: Alla länkar till
/wp-admin
eller liknande internt WordPress rutter fungerar inte, eftersom dessa kräver bearbetning på serversidan. - Innehållsuppdateringar i realtid: Statiska webbplatser kräver regenerering och omdistribuering för att innehållsändringar ska visas, till skillnad från dynamiska WordPress webbplatser där förändringar är omedelbara.
- Användarautentisering: Funktioner som kräver användarinloggning eller medlemskap stöds inte i en grundläggande statisk webbplatsinstallation.
- E-handelsfunktioner: Dynamiska kundvagnar och betalningshantering fungerar vanligtvis inte i en statisk miljö.
- Sökfunktionalitet: WordPresss inbyggda sökfunktion kommer inte att fungera, även om alternativ kan implementeras (som nämnts i Simply Static Pro-funktionerna).
- Dynamiska sidofält och widgets: Widgets som hämtar realtidsdata eller kräver bearbetning på serversidan fungerar inte som förväntat.
Möjliga lösningar
Även om dessa begränsningar finns, finns det sätt att mildra några av dem:
- För formulär kan du använda tredjepartstjänster som Formspree eller Netlify Forms.
- Kommentarer kan hanteras via tjänster som Disqus eller Facebook Comments.
- Sökfunktionalitet kan implementeras med hjälp av lösningar på klientsidan som Lunr.js eller Algolia (som erbjuds i Simply Static Pro).
- För e-handel, överväg att använda externa tjänster som Snipcart eller Gumroad.
När du utvecklar din WordPress håll dessa begränsningar i åtanke och planera din webbplatsstruktur och funktioner därefter. Fokusera på innehållsdrivna sidor och minimera beroendet av dynamiska funktioner som inte översätts till en statisk miljö.
Steg 2: Installera och konfigurera Simply Static
Simply Static är en gratis WordPress plugin som genererar en statisk version av din WordPress plats. Så här ställer du in det:
- I din WordPress instrumentpanelen, gå till Plugins > Lägg till nytt.
- Sök efter "Simply Static", installera plugin och aktivera plugin.
- Gå till Simply Static > Inställningar i din WordPress instrumentbräda.
- Under fliken "Allmänt" ställer du in följande:
- Destinationsadresser: Välj "Spara för offlineanvändning". Om du redan har en anpassad domän, välj "Absoluta webbadresser", enligt skärmdumpen nedan:
- Lokal katalog: Ställ in detta på en katalog utanför din WordPress installation, t.ex.
/Users/yourusername/Documents/StaticSite
- Se till att alla nödvändiga webbadresser finns med under fliken "Inkludera/uteslut".
- Använd i de flesta fall /wp-content/ och /wp-includes/
- Spara dina inställningar.
Det finns också en pro-version av SimplyStatic, Här är en sammanfattning av proffsfunktionerna i Simply Static plugin:
- Avancerad distribution:
- Distribuera statiska webbplatser till flera plattformar inklusive SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces och BunnyCDN.
- Enkla webbplatsuppdateringar:
- Hantera innehållsuppdateringar effektivt, oavsett om det gäller enstaka inlägg, massuppdateringar eller specifika webbadresser.
- Integration av formulär och kommentarer:
- Sömlöst integrera formulär från populära plugins som Contact Form 7, Gravity Forms och Elementor Forms i din statiska webbplats.
- Sökfunktioner:
- Implementera grundläggande sökning med Fuse.js eller uppgradera till en mer omfattande sökupplevelse med Algolia.
- WP-CLI-stöd:
- Använd WP-CLI för att konfigurera, exportera och hantera Simply Static-funktioner direkt från kommandoraden.
- Flerspråkig support:
- Erbjud innehåll på flera språk med integrationer för WPML, Polylang och TranslatePress.
- minification:
- Optimera webbplatsens prestanda genom att förminska CSS, JavaScript och statiska HTML-filer.
- WordPress Döljande:
- Ersätt standard WordPress vägar för att dölja det faktum att WordPress används som innehållshanteringssystem.
Dessa proffsfunktioner förbättrar avsevärt funktionaliteten och flexibiliteten hos static WordPress webbplatser, vilket möjliggör mer avancerade implementeringar, bättre prestanda och förbättrad användarupplevelse.
Steg 3: Initiera Git Repository
Nu när vi har ställt in vår statiska webbplatsgenerator, låt oss förbereda vår lokala katalog för versionskontroll:
- Öppna en terminal eller kommandotolk.
- Navigera till katalogen du angav i Simply Static (t.ex.
cd /Users/yourusername/Documents/StaticSite
). - Initiera ett nytt Git-förråd genom att köra:
git init
Steg 4: Skapa ett GitHub-förråd
Vi kommer att använda GitHub Desktop för att skapa och hantera vårt arkiv:
- Ladda ner och installera GitHub Desktop från desktop.github.com om du inte redan har det
- Öppna GitHub Desktop och logga in på ditt GitHub-konto.
- Klicka på "Arkiv"> "Nytt arkiv" eller använd knappen "Skapa ett nytt arkiv på din hårddisk".
- Ställ in följande:
- Namn: Välj ett namn för ditt arkiv (t.ex. "my-static-wordpress")
- Lokal sökväg: Ställ in denna till samma katalog som du angav i Simply Static
- Initiera detta förråd med en README: Lämna omarkerad
- Git ignore: Välj "Ingen" (vi skapade vår egen i steg 3)
- Licens: Välj en lämplig licens eller lämna som "Ingen"
- Klicka på "Skapa arkiv"
Steg 5: Ange arkivet
Nu när vi har ställt in vårt arkiv, låt oss göra vårt första åtagande:
- I GitHub Desktop bör du se alla filer på din statiska webbplats listade som ändringar.
- Ange en sammanfattning för din commit (t.ex. "Initial commit av statiska webbplatsfiler").
- Klicka på "Commit to main" (eller "Commit to master" i äldre versioner).
- Klicka på "Publicera arkiv" för att skicka ditt lokala arkiv till GitHub.
Steg 6: Kör en helt enkelt statisk export
Nu är det dags att skapa vår statiska webbplats:
- Gå tillbaka till din WordPress instrumentbräda.
- Navigera till Simply Static > Generate. (Du kan ignorera felmeddelandet för diagnostik, eftersom du bara distribuerar till en lokal katalog).
- Klicka på "Generera statiska filer".
- Vänta tills processen är klar. Detta kan ta några minuter beroende på storleken på din webbplats.
- När du är klar, gå tillbaka till GitHub Desktop.
- Du bör se de nyligen genererade eller uppdaterade filerna listade som ändringar.
- Bekräfta dessa ändringar med ett meddelande som "Uppdatera statiska webbplatsfiler".
- Tryck på ändringarna till GitHub genom att klicka på "Push origin".
Steg 7: Anslut arkivet till en värdplattform
Nu när vår statiska sida finns på GitHub kan vi enkelt ansluta den till en gratis värdplattform. Jag kommer att tillhandahålla instruktioner för GitHub Pages, Netlify och Vercel:
GitHub-sidor
- Gå till ditt förråd på GitHub.com.
- Klicka på "Inställningar" > "Sidor" i det vänstra sidofältet.
- Under "Källa", välj "Distribuera från en filial".
- Välj den gren du vill distribuera (vanligtvis "huvud" eller "master").
- Välj rotmappen (/) och klicka på "Spara".
- Din webbplats kommer att vara live kl
https://yourusername.github.io/repository-name/
.
nätifiera
- Registrera dig för ett gratis konto på netify.com.
- Klicka på "Ny webbplats från Git" på din Netlify-instrumentpanel.
- Välj GitHub som din Git-leverantör och auktorisera Netlify.
- Välj ditt förråd från listan.
- Lämna byggkommandot och publicera katalogen tom.
- Klicka på "Distribuera webbplats".
- Din webbplats kommer att finnas på en Netlify-underdomän, som du kan anpassa i webbplatsinställningarna.
vercel
- Registrera dig för ett gratis konto på vercel.com.
- Klicka på "Nytt projekt" på din Vercel-instrumentpanel.
- Importera ditt GitHub-förråd.
- Lämna bygginställningarna som de är (Vercel ska automatiskt upptäcka att det är en statisk webbplats).
- Klicka på "Distribuera".
- Din webbplats kommer att finnas på en Vercel-underdomän, som du kan anpassa i projektinställningar.
Sammanfattning
Grattis! Du har nu en statisk version av din WordPress värd för webbplatsen gratis. Kom ihåg att återskapa och pusha dina statiska filer när du gör ändringar i din WordPress plats. Detta arbetsflöde låter dig njuta av det enkla WordPress för att skapa innehåll samtidigt som du drar nytta av hastigheten, säkerheten och gratis hosting av en statisk webbplats.
Några ytterligare tips:
- Överväg att skapa en anpassad domän för ett mer professionellt utseende.
- Uppdatera din WordPress installation och plugins för att säkerställa att du arbetar med de senaste funktionerna och säkerhetsuppdateringarna.
- Utforska avancerade funktioner i Pro-version av Simply Static, som att gömma sig WordPress och ställa in formulär eller sökfunktioner för din statiska webbplats.