Generatorer för statiska webbplatser

Statiska webbplatser har inget dynamiskt innehåll och består av statiska filer, som exempelvis HTML, CSS och JavaScript. De kräver ingen bearbetning på server-sidan eller i en databas.

Filerna är färdigbyggda. Som ett resultat krävs det ingen ytterligare bearbetning när en användare besöker webbplatsen. Utöver detta krävs det dessutom färre resurser för att köra webbplatsen. Eftersom det inte finns några skript eller någon databas att utnyttja ökar även säkerheten på webbplatsen.

Fördelar med statiska webbplatsgeneratorer

Är du bekant med HTML, CSS och JavaScript? Då kan du bygga en statisk webbplats med hjälp av en text- eller kodredigerare. Men du behöver den tekniska kunskapen för att skriva innehållet, det kan nämligen vara otympligt och tidskrävande. När din webbplats växer kan den dessutom bli svårare att hantera och underhålla.

Generatorer för statiska webbplatser (SSG) är ett mer effektivt alternativ för att bygga en statisk webbplats. De innehåller ofta olika verktyg som gör det enklare att skapa, utforma, publicera och redigera ditt innehåll efter behov. Några av de viktigaste fördelarna med att använda en statisk webbplatsgenerator är exempelvis:

• Mallar: Med ett mall-system kan du därefter definiera webbplatsens struktur och layout med hjälp av återanvändbara mallar och komponenter. De kan dessutom användas på flera sidor. Som ett resultat behöver du därefter inte duplicera eller uppdatera vanliga element på flera sidor manuellt. Detta separerar dessutom innehållet från design- och presentationslagret. Du kan därför fokusera på att skriva och uppdatera innehållet.
• Automatisering: Inkluderar din webbplats innehåll från olika källor, exempelvis Markdown-filer eller datafiler? Då kan en statisk webbplats-generator automatisera processen att konvertera ditt innehåll till HTML-filer. Uppgifter som minifiering, optimering och paketering av tillgångar kan också automatiseras. Allt detta sparar tid och minskar risken för fel. Du kan därefter skapa och optimera din webbplats utan att behöva utföra varje uppgift manuellt.
• Versionskontroll: Generatorer för statiska webbplatser integreras med versionskontrollsystem som Git. Som ett resultat kan du spåra ändringar, samarbeta med andra och enkelt återgå till tidigare versioner om det krävs.
• Inkrementella byggen: När du gör ändringar och genererar en ny utmatning är det bara de filer som har ändrats sedan den senaste byggnationen som regenereras. Många generatorer för statiska webbplatser stöder inkrementella byggen, vilket exempelvis förbättrar byggtiden för större webbplatser och små uppdateringar.

Använda en generator för statiska webbplatser

Varje statisk webbplatsgenerator (SSG) har sina egna funktioner, konfigurationer och mallsystem. Inställningen för att generera en webbplats som kommer att hostas med Kinsta’s hosting för statiska webbplatser omfattar vanligtvis följande:

1. Välj din SSG: Det finns många tillgängliga SSG: er. Att välja den som passar bäst för dina behov är det första steget. För att bygga och hosta webbplatsen med Kinsta’s hosting för statiska webbplatser, välj en som använder Node.js för byggprocessen. Nedan har vi en lista över SSG: er som är redo att användas på Kinsta.
2. Ställ in en lokal utvecklingsmiljö: Installera de nödvändiga beroendena, inklusive SSG själv, alla nödvändiga programmeringsspråk och därefter en kodredigerare.
3. Skapa din nya webbplats: Skapa den nya webbplatsen i din SSG. Detta genererar därefter den grundläggande katalog-strukturen och konfigurations-filerna som krävs för projektet.
4. Konfiguration: Ställ in webbplatsens konfiguration för att anpassa webbplatsens struktur och hur generatorn bearbetar dina källfiler. Den här filen kan dessutom innehålla inställningar som in- och utdata-kataloger, mall-sökvägar, metadata, plugin-konfigurationer osv.
5. Mallar: Skapa mallar och layouter som därefter definierar gemensamma element och struktur för dina sidor, exempelvis sidhuvud, sidfot, navigeringsmenyer etc.
6. Lägg till innehåll och tillgångar: Skapa eller samla befintligt innehåll med hjälp av Markdown eller andra format som stöds. Varje sida motsvarar generellt en fil i innehållskatalogen. Tillgångar kommer därefter sannolikt att lagras i en separat katalog från innehålls-filerna.
7. Styling: Ändra CSS eller preprocessor-filer (t.ex. SASS eller LESS) för att tillämpa anpassade stilar på din webbplats. Vissa SSG: er har dessutom teman som kan installeras och anpassas för styling.
8. Bygg och förhandsgranska lokalt: Kör bygg-kommandot som tillhandahålls av SSG för att kompilera din webbplats. SSG bearbetar därefter dina mallar, konverterar dina innehålls-filer till HTML och genererar de statiska filerna (HTML, CSS och JavaScript). Om tillämpligt kommer den även att utföra uppgifter som minifiering, optimering och paketering av tillgångar. Använd denna setp för att säkerställa att allt ser ut och fungerar som avsett.
9. Skapa ditt Git-kodförråd: Använd Git för att skapa ditt kodförråd, kör sedan ett utförande och pusha din nya webbplats till ditt nya Git-kodförråd.
   1. Kommer du att distribuera webbplatsen till Kinsta utan att köra byggandet på Kinsta? Då måste de filer saom du flyttar till ditt arkiv vara utdata från byggandet (HTML-, CSS- och JavaScript-filerna).
   2. Om webbplatsen ska byggas på Kinsta måste filerna som du flyttar till ditt arkiv vara innehållet, tillgångar som bilder eller andra media. De måste dessutom vara SSG-filerna (eller konfigurations-filer som kommer att dra in beroenden för byggandet).

10. Distribuera din nya statiska webbplats: I MyKinsta lägger du till en ny statisk webbplats och ansluter den därefter till ditt Git-kodförråd. Allt för att distribuera din webbplats till Kinsta’s 260+ CDN-platser.
11. Underhåll och uppdatera: När du fortsätter att arbeta på din webbplats, se till att följa bästa praxis för versionskontroll. Utför regelbundet ändringar och håll dig uppdaterad med de senaste versionerna av SSG och dess beroenden. Detta säkerställer en smidig utvecklingsprocess och gör därefter att du kan dra nytta av nya funktioner och buggfixar.

Kompatibilitet med statisk webbplats-generator

Kinsta’s hosting för statiska webbplatser är för förbyggda statiska webbplatser eller webbplatser som är byggda med moderna JavaScript-ramverk. De ska använda Node.js för att bygga webbplatsen på Kinsta. Målsidor, broschyr-sidor och till och med några små bloggar som inte uppdateras så ofta och inte kräver dynamiskt innehåll (som kommentarer) är vanligtvis en bra passform.

Om din webbplats uppfyller något av följande villkor kommer den att vara bättre lämpad för vår Applikationshosting:

• Den använder ett annat språk än Node.js för att bygga webbplatsen (exempelvis PHP).
• Det krävs server-rendering för att betjäna en del av eller hela webbplatsen.
• Den kräver en databas-anslutning.
• Den visar dynamiskt innehåll.
• Den kräver sessioner eller autentisering som hanteras på server-sidan.

Om du inte är helt säker på vilken hosting som är bäst för din webbplats rekommenderar vi att du distribuerar din webbplats på båda. Då får du prova varje alternativ och därefter avgöra vilket som passar bäst för dina behov.

Det finns många tillgängliga statiska webbplats-generatorer. Byggkommandot och publicerings-katalogen kan därför variera från webbplats till webbplats. Tabellen nedan visar bygg-kommandot och publicerings-katalogen som ska användas för några populära statiska webbplats-generatorer som är kompatibla med hosting-tjänster för statiska webbplatser.

* Detta kräver Node 16 eller att SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build src läggs till i package.json för bygg-kommandot.

Relaterad dokumentation

• Lägg till en statisk webbplats
• Snabbstarts-exempel för statisk webbplats
• Interna anslutningar

Hänvisat innehåll

• Vad är en statisk webbplats?
• De 13 bästa textredigerarna för att snabba upp ditt arbetsflöde
• De topp 5 statiska webbplatsgeneratorerna 2023
• Hosting-tjänster för applikationer