Det här är ett exempel på hur man ställer in en statisk webbplats med Gatsby från ett GitHub-kodförråd på Kinsta’s tjänster för Applikationshosting eller hosting av statiska webbplatser.

Under distribueringsprocessen så installerar Kinsta automatiskt beroenden som definieras i din package.json-fil.

Hosting av statiska webbplatser

  1. Logga in på GitHub och skapa ett nytt kodförråd från den här mallen (Använd den här mallen > Skapa ett nytt kodförråd): Kinsta – Hello World – Statisk webbplats med Gatsby
  2. I MyKinsta lägger du till en statisk webbplats med Hello World Gatsby-kodförrådet och följande Bygg-inställningar:
    • Bygg-kommando: npm run build
    • Node-version: 18.16.0
    • Publicerings-katalog: public
  3. Webbplatsen är tillgänglig så snart som byggandet är klart och Kinsta’s välkomstsida laddas på din webbplats webbadress.

Applikationshosting

  1. Logga in på GitHub och skapa ett nytt arkiv från den här mallen (Använd den här mallen > Skapa ett nytt arkiv): Kinsta – Hello World – Statisk webbplats med Gatsby
  2. Lägg till en applikation i MyKinsta med Hello World Gatsby-arkivet. Start-kommandot kan lämnas tomt för webb-processen eftersom Kinsta upptäcker det nödvändiga kommandot automatiskt under den första distribueringen.

Inställning av webbserver

Port

Kinsta ställer in miljövariabeln PORT automatiskt. Du behöver inte definiera den eller hårdkoda den i applikationen. Paketet serve använder den port som Kinsta har ställt in automatiskt.

Start-kommando

När du distribuerar applikationen så skapar Kinsta automatiskt en webbprocess med npm start som start-kommando.

Livscykel för distribuering

Närhelst som en distribuering inleds (genom att skapa en applikation eller genom att återdistribuera på grund av ett inkommande utförande) så körs kommandot npm build, följt av kommandot npm start.

Välkomstsida

Appen eller webbplatsen är tillgänglig så snart som byggandet är klart, och en standard Gatsby-sida laddas på din applikations webbadress.

Gatsby's standardsida efter implementeringen av Gatsby.
Gatsby’s standardsida efter implementeringen av Gatsby.