VuePress

Dit is een voorbeeld van hoe je een statische site kunt opzetten met VuePress op Kinsta’s Statische Site Hosting vanuit een GitHub repository.

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

Je kunt deze Quickstart template ook gebruiken op Kinsta’s Applicatie Hosting zonder extra configuratie. Als je Applicatie Hosting gebruikt, kun je het Start commando leeg laten voor het webproces omdat Kinsta automatisch het vereiste commando detecteert tijdens de eerste deployment.

Vereisten

• Kinsta’s Quickstart templates worden opgeslagen en beheerd in GitHub; daarom heb je een GitHub account nodig om ze te openen.
• Je moet een MyKinsta account aanmaken om de applicatie te deployen.

Een VuePress statische site deployen

1. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – Static Site With VuePress.
2. Klik in MyKinsta op Statische sites > site toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
3. Kies de Hello World VuePress repository, klik op Doorgaan, en voer het volgende in bij de Build instellingen:
   • Build commando: npm run build
   • Node versie: 16.20.0
   • Publish directory:./docs/.vuepress/dist

Kinsta installeert automatisch de dependencies die zijn gedefinieerd in je composer.json bestand tijdens het deploymentproces. De site is beschikbaar zodra de deployment is voltooid en de Hello World pagina wordt geladen op de URL van je site.

Deployment levenscyclus

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