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).
  1. 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.
  2. 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. Kinsta upptäcker flera ramverk automatiskt och fyller i fälten Byggkommando och Publicerings-katalog när du lägger till din statiska webbplats.

Tabellen nedan visar bygg-kommandot och publicerings-katalogen som ska användas för olika populära statiska webbplats-generatorer som är kompatibla med hosting-tjänster för statiska webbplatser.

Generator för statisk webbplats Bygg-kommando Publicerings-katalog Ytterligare anmärkningar
Angulär npm run build -- -c production dist/{namn_på_projektet)
Astro npm run build dist
Brunch npm run build offentlig
Kuttlebelle npm run build .site
Docusaurus npm run build bygga
Elder.js npm run build offentlig
Eleventy npx @11ty/eleventy _site
Ember npm run build dist
Gatsby npm run build offentlig
Gridsome npm run build dist Kräver Node 16 eller aktivering av OpenSSL legacy provider.*
Hugo npm run build offentlig Kräver ytterligare konfiguration för kompatibilitet.**
Hexo npm run build offentlig
Next.js npm run build ut Skapa enligt Next Static Exports.
Nuxt npm run generate .output/public Skapa enligt Nuxt rendering endast på klientsidan.
Occur npm run build dist
Qwik npm run build && npm run build.server dist Kräver SSG-adapter.
React (med hjälp av skapa React-app) npm run build bygga
React (med hjälp av Vite) npm run build dist
Solid npm run build dist
Svelte npm run build bygga Kräver adapter för statisk webbplats.
Vite 3 npm run build dist
Vue npm run build dist
VuePress 1.x npm run build src/.vuepress/dist Kräver Node 16 eller aktivering av OpenSSL legacy provider.*
VuePress 2.x npm run build ./docs/.vuepress/dist

* Gridsome eller VuePress 1.x

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.

** Hugo

  • Lägg till npm install hugo-bin serve --save-dev till ditt projekt.
  • Lägg till eller ersätt följande, beroende på ditt projekt:
    {
      "scripts": {
        "build": "hugo"
      }
    }
    
  • Det är vanligt att Hugo-teman rekommenderar installation via en Git-undermodul. För närvarande är undermoduler inte kompatibla med Hosting av statiska webbplatser eller Applikationshosting, så temafilerna måste finnas tillgängliga i webbplatsens kodförråd.

Relaterad dokumentation

Hänvisat innehåll