Dit is een voorbeeld van hoe je een statische site opzet met VuePress op Kinsta’s Applicatie of Statische Site Hosting diensten vanuit een GitHub repository.

VuePress is een statische site-generator waarmee je dynamische content in je Markdown bestanden kunt insluiten met behulp van Vue-componenten om statische HTML pagina’s te produceren. Meer informatie is beschikbaar op de VuePress website.

Kinsta installeert tijdens het deployen automatisch dependencies die in je composer.json bestand zijn gedefinieerd.

Statische Site Hosting

  1. Log in op GitHub en maak een nieuwe repository vanuit deze template (Gebruik deze template > Create a new repository): Kinsta – Hello World – Statische site met VuePress.
  2. Voeg in MyKinsta een statische site toe met de Hello World VuePress repository en de volgende Build instellingen:
    • Build commando: npm run build
    • Node versie: 16.20.0
    • Publish directory: ./docs/.vuepress/dist
  3. De site is beschikbaar zodra de build klaar is en de Hello World-pagina wordt geladen op de URL van je site.

Applicatie Hosting

  1. Log in op GitHub en maak een nieuwe repository aan vanuit deze template (Use this template > Create a new repository): Kinsta – Hello World – Statische site met VuePress
  2. Voeg in MyKinsta een applicatie toe met de Hello World VuePress repository. Het Start commando kan leeg gelaten worden voor het webproces, omdat Kinsta automatisch het vereiste commando detecteert tijdens de eerste deployment.
  3. De app is beschikbaar zodra de build klaar is, en een Hello World-pagina laadt op de URL van je applicatie.

Webserver instelling

Poort

Kinsta stelt automatisch de omgevingsvariabele PORT in. Je hoeft deze niet te definiëren of vast te leggen in de applicatie. Het serve pakket gebruikt automatisch de door Kinsta ingestelde poort.

Start commando

Wanneer je de applicatie deployet, maakt Kinsta automatisch een webproces aan met npm start als Start commando.

Deployment levenscyclus

Telkens als je een deployment start (door het maken van een applicatie of het opnieuw deployen vanwege een inkomende commit), wordt het commando npm build uitgevoerd, gevolgd door het commando npm start.

Hello World Pagina

De app of site is beschikbaar zodra de build is voltooid en de Hello World-pagina wordt geladen via de URL van je applicatie of statische site.

VuePress applicatie.
VuePress applicatie.