Dette er et eksempel på, hvordan man opsætter et statisk websted med VuePress på Kinstas Applikation eller Static Site Hosting-tjenester fra et GitHub-repository.

VuePress er en statisk webstedsgenerator, der giver dig mulighed for at indlejre dynamisk indhold i dine Markdown-filer ved hjælp af Vue-komponenter til at producere statiske HTML-sider. Mere information er tilgængelig på VuePress hjemmeside.

Kinsta installerer automatisk afhængigheder defineret i din composer.json-fil under installationsprocessen.

Statisk webstedshosting

  1. Log ind på GitHub og opret et nyt lager fra denne skabelon (Brug denne skabelon > Opret et nyt lager): Kinsta – Hello World – Static Site with VuePress
  2. I MyKinsta skal du tilføje et statisk websted med Hello World VuePress-repository og følgende Build-indstillinger:
    • Byg kommando: npm run build
    • Nodeversion: 16.20.0
    • Udgiv bibliotek: ./docs/.vuepress/dist
  3. Siden er tilgængelig, så snart opbygningen er færdig, og Hello World-siden indlæses på dit websteds URL.

Applikation Hosting

  1. Log ind på GitHub og opret et nyt repository fra denne skabelon (Brug denne skabelon > Opret et nyt lager): Kinsta – Hello World – Statisk websted med VuePress
  2. I MyKinsta skal du tilføje en applikation med Hello World VuePress-depotet. Start-kommandoen kan stå tom for webprocessen, da Kinsta automatisk registrerer den nødvendige kommando under den første implementering.
  3. Appen er tilgængelig, så snart opbygningen er færdig, og Hello World-siden indlæses på din applikations URL.

Opsætning af webserver

Port

Kinsta indstiller automatisk miljøvariablen PORT. Du behøver ikke at definere den eller indkode den i programmet. Pakken serve bruger den port, der er indstillet af Kinsta, automatisk.

Start Kommando

Når du implementerer applikationen, opretter Kinsta automatisk en webproces med npm start som startkommando.

Implementeringens livscyklus

Hver gang du starter en implementering (ved at oprette en applikation eller ved at genimplementere på grund af en indgående commit), køres kommandoen npm build the, efterfulgt af kommandoen npm start.

Hello World side

Appen eller webstedet er tilgængeligt, så snart opbygningen er færdig, og Hello World-siden indlæses på din applikations URL eller statiske websteds URL.

VuePress-applikation.
VuePress-applikation.