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

VuePress är en statisk webbplatsgenerator; den är Vue-driven, och dess viktigaste egenskaper är prestanda och en enkelhets-strategi. Mer information finns på VuePress webbplats från ett GitHub-kodförråd.

Kinsta installerar automatiskt beroenden som definieras i din composer.json -fil under distribueringsprocessen.

Hosting av statiska webbplatser

  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 – Static Site with VuePress
  2. I MyKinsta lägger du till en applikation med Hello World VuePress-kodförrådet och följande Bygg-inställningar:
    • Byggkommando: npm run build
    • Nodversion: 16.20.0
    • Publicerings-katalog: ./docs/.vuepress/dist
  3. Webbplatsen är tillgänglig så snart som bygget är klart, och Hello world-sidan 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 – Static Site with VuePress
  2. I MyKinsta så lägger du till en applikation med Hello World VuePress-arkivet. Kommandot Start kan lämnas tomt för webbprocessen eftersom Kinsta upptäcker det nödvändiga kommandot automatiskt under den första distribueringen.
  3. Appen är tillgänglig så snart som bygget är klart, och Hello world-sidan laddas på din applikations webbadress.

Inställning av webbserver

Port

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

Startkommando

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

Livscykel för distribuering

När du startar en distribuering (genom att skapa en applikation eller distribuera om på grund av ett inkommande utförande) så körs kommandot npm build, följt av kommandot npm start.

Hello World-sida

Appen eller webbplatsen är tillgänglig så snart som bygget är klart, och Hello World-sidan laddas på din applikations webbadress eller den statiska webbplatsens webbadress.

VuePress-applikation
VuePress-applikation