Voici un exemple de la manière de configurer un site statique avec VuePress sur les services d’hébergement d’applications ou de sites statiques de Kinsta depuis un dépôt GitHub.

VuePress est un générateur de site statique qui vous permet d’intégrer du contenu dynamique dans vos fichiers Markdown à l’aide de composants Vue pour produire des pages HTML statiques. Vous trouverez de plus amples informations sur le site web de VuePress.

Kinsta installe automatiquement les dépendances définies dans votre fichier composer.json au cours du processus de déploiement.

Hébergement de site statique

  1. Connectez-vous à GitHub et créez un nouveau dépôt depuis ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Site statique avec VuePress
  2. Dans MyKinsta, ajoutez une application avec le dépôt VuePress Hello World et les réglages de construction suivants :
    • Commande de construction : npm run build
    • Version de Node : 16.20.0
    • Répertoire de publication : ./docs/.vuepress/dist
  3. Le site est disponible dès que la construction se termine, et la page Hello world se charge à l’URL de votre site.

Hébergement de l’application

  1. Connectez-vous à GitHub et créez un nouveau dépôt depuis ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Sites Statiques avec VuePress
  2. Dans MyKinsta, ajoutez une application avec le dépot VuePress Hello World. La commande Start peut être laissée vide pour le processus web car Kinsta détecte automatiquement la commande nécessaire lors du premier déploiement.
  3. L’application est disponible dès que la construction se termine, et la page Hello world se charge à l’URL de votre application.

Configuration du serveur web

Port

Kinsta configure automatiquement la variable d’environnement PORT. Vous n’avez pas besoin de la définir ou de la coder en dur dans l’application. Le paquet serve utilise automatiquement le port configuré par Kinsta.

Commande de démarrage

Quand vous déployez l’application, Kinsta crée automatiquement un processus web avec npm start comme commande de démarrage.

Cycle de vie du déploiement

Chaque fois que vous initiez un déploiement (en créant une application ou en la redéployant suite à un commit entrant), la commande npm build the est utilisée, comme ci-dessous la commande npm start.

Page Hello World

L’application ou le site est disponible dès la fin de la construction, et la page Hello World se charge à l’URL de votre application ou de votre site statique.

Application VuePress.
Application VuePress.