När ”World Wide Web” först visades för allmänheten 1991 var alla webbplatser samlingar av statiska HTML-dokument. Varje fil innehöll med andra ord den uppmärkning som krävdes för att rendera en komplett sida i en webbläsare. Nästan omedelbart började webbens banbrytande utvecklare att arbeta på sätt att generera webbplatser dynamiskt, sammansatta av kod som körs på webbservrar och extraherar innehåll från databassystem.

Statiska webbplatser försvann visserligen inte helt och hållet när CMS började dominera. En modern variant av konceptet med statiska webbplatser är dock populär bland dem som värdesätter snabbhet och säkerhet.

På Kinsta’s plattform för Hosting av statiska webbplatser är webbplatserna verkligen snabba och säkra. De är dessutom kostnadsfria.

Låt oss ta en närmare titt på statiska webbplatser och hur Kinsta kan hjälpa dig att distribuera din till edge-servrar över hela världen.

Är en statisk webbplats rätt för ditt webbprojekt?

En statisk webbplats serverar förbyggd HTML, CSS, JavaScript och mediefiler.

”Fördelen med att ha statiskt innehåll är att det är snabbt och effektivt”, säger Michael Fuller. Han är en JavaScript-utvecklare på Kinsta och dessutom en medlem av teamet som hjälpte till att lansera Kinsta’s plattform för hosting av statiska webbplatser. ”I stället för att en server måste konstruera sidan genom att prata med databasen, skickar den bara användarna dina förgjorda filer.”

”Det krävs inget skapande av statiska filer helt för hand. Du kan istället nyttja ett antal statiska webbplatsgeneratorer”, säger han. ”Det är kit som gör det enklare att skapa och uppdatera en statisk webbplats genom att omvandla de filer som du tillhandahåller till en fungerande webbplats.”

Vilken typ av projekt kan distribueras som statiska webbplatser?

”Om du inte har några sidor som kräver att någon loggar in, ingen databas eller något annat som skulle kräva dynamiskt innehåll, då är det förmodligen en bra kandidat för att vara en statisk webbplats”, säger Fuller. ”Det kan exempelvis vara portfolios, marknadsföringssidor eller till och med en blogg. Det vill säga om du är nöjd med att skriva nya inlägg med hjälp av en generator för statiska webbplatser.”

Och när en webbplats inte har någon server eller databas att ansluta till finns det dessutom färre vägar för säkerhets-intrång.

”För mer avancerade fall kan man ha en blandad strategi”, säger Fuller. ”Man kan skapa en statisk webbplats som använder ett JavaScript-ramverk för att prata med en server som hanteras separat. Som ett resultat får du hastighetsfördelarna i dina initiala laddningstider, i kombination med flexibiliteten hos en dynamisk webbplats.”

En översikt över hosting av statiska webbplatser på Kinsta

Det här är vad du får kostnadsfritt på Kinsta’s plattform för hosting av statiska webbplatser:

  • 100 statiska webbplatser per företag
  • 1 samtidig byggnation per webbplats
  • 1 GB bildstorlek per webbplats
  • 600 byggminuter per månad per företag
  • 100 GB bandbredd per månad per företag

Och, som med Kinsta’s plattformar för Applikationshosting och Hanterad WordPress-hosting, finns det kostnadsfria SSL-certifikat, stöd för anpassade domännamn och ett valfritt API för webbplatshantering.

Kinsta bygger och skickar därefter statiskt webbplatsinnehåll till 260+ datacenter i Cloudflare’s globala nätverk. Det är samma plattform som backar upp Kinsta CDN och edge-cachning för WordPress-webbplatser.

Distribuera en statisk webbplats på Kinsta

Det första steget i att distribuera en statisk webbplats på Kinsta är att ansluta din föredragna Git-host till ditt konto i MyKinsta.

”Vi stöder för närvarande tre av de ledande Git-leverantörerna, BitBucket, GitHub och GitLab”, säger Fuller. ”Du får därför njuta av, utöver fördelarna med att vi serverar din webbplats, att du kan använda deras versionsspårning och verktyg.”

Välja en Git-leverantör i MyKinsta.
Välja en Git-leverantör i MyKinsta.

Efter att ha auktoriserat MyKinsta’s åtkomst till din Git-leverantör kan du därefter börja lägga till din första statiska webbplats genom att välja dess arkiv och gren:

Lägga till en statisk webbplats i MyKinsta.
Lägga till en statisk webbplats i MyKinsta.

Ovan har vi valt Automatisk distribuering vid utförande. Som ett resultat kommer Kinsta att omplacera webbplatsen när ändringar skjuts till grenen på Git-värden.

Därefter kommer MyKinsta att försöka fastställa de bygginställningar som krävs för ditt projekt:

Bygginställningar upptäckta för ett projekt som använder Nuxt.js för att generera en statisk webbplats.
Bygginställningar upptäckta för ett projekt som använder Nuxt.js för att generera en statisk webbplats.

”Om vi kan identifiera den generator och pakethanterare som du använder kommer vi att fylla i dessa med de standard-konventioner som används för dem”, säger Fuller. ”Kommandot för Node.js-drivna byggnationer är exempelvis vanligtvis yarn build eller npm run build, och publicerings-katalogen är vanligtvis något som build, dist, public eller out.”

Ange egna miljövariabler

”Du kan dessutom ange dina egna miljövariabler om din byggprocess använder sig av dem.”

”I den första versionen av Hosting av statiska webbplatser stöder vi endast Node.js för att bygga webbplatser”, säger Fuller, ”men vi arbetar för att kunna erbjuda fler plattformar i framtiden.”

Du kan dock fortfarande distribuera många statiska webbplatser som inte är beroende av Node.js-verktyg för att byggas. Vi har exempelvis beskrivit hur man distribuerar en Jekyll-webbplats och en Hugo-webbplats – ingen av dem har byggnationer som drivs av Node.js. I båda fallen byggs webbplats-tillgångar utanför Kinsta-plattformen och läggs därefter till i en mapp eller gren i ett Git-kodförråd. Allt distribueras därefter som en statisk webbplats.

Du kan dessutom distribuera statiska tillgångar som inte har något byggsteg alls, exempelvis vanliga HTML-webbplatser.

”Om du inte använder en generator behöver inget bygg-kommando anges och vi antar att ditt kodförråd innehåller förgjorda filer”, säger Fuller.

När en distribuering triggas läggs den till i webbplatsens byggkö.

”När distribueringen startar skapar vi en bygginstans i Google Cloud Platform och hämtar därefter koden från ditt kodförråd”, säger Fuller. ”Om ett bygg-kommando har angetts använder vi en avbildning som är baserad på din angivna plattform – Node.js för tillfället – för att köra kommandot. Efter detta kontrollerar vi filstorleken på allt i publicerings-katalogen för att bekräfta att den ligger inom våra gränser.”

”Det sista steget är uppladdningen, där vi skickar dina filer till en Cloudflare R2-bucket.”

Detaljer om den nya statiska webbplats-distribueringen.
Detaljer om den nya statiska webbplats-distribueringen.

Maximera hastigheten med inkrementella distribueringar

Distribuerings-processen för hosting-tjänster för statiska webbplatser optimerar byggtiderna. Den gör detta genom att endast ladda upp filer som faktiskt har ändrats till Cloudflare’s servrar.

”Vi behåller tidigare uppladdade filer över flera distribueringar. Om du väljer att distribuera om en tidigare version är antalet filer som behöver laddas upp igen få eller inga alls”, säger Fuller. ”För att göra detta byter vi namn på filerna till hashvärdet för deras innehåll och sparar de ursprungliga sökvägarna. Vi lagrar dessa i en kartfil för den aktuella distribueringen, med sökvägen som nyckel och det nya namnet som värde.”

”När en förfrågan skickas till webbplatsen använder vi därefter kartan för den aktuella distribueringen för att dirigera till rätt version av filen.”

Infrastrukturen bakom Kinsta's hosting av statiska webbplatser.
Infrastrukturen bakom Kinsta’s hosting av statiska webbplatser.

Sammanfattning

Kinsta’s plattform för hosting av statiska webbplatser erbjuder en blixtsnabb innehållsleverans på ett nätverk i världsklass. Allt sker på edge-servrar som backas upp av MyKinsta-panelen och som gör distribueringen blixtsnabb.

Och allt är kostnadsfritt.

Kom igång snabbt med Hosting av statiska webbplatser på Kinsta genom att kolla in vårt bibliotek med snabbstartsexempel som täcker ett antal statiska webbplats-generatorer. Exemplen inkluderar Git-kodförråd som du kan kopiera för att starta dina egna projekt.

Steve Bonisteel Kinsta

Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.