Questo è un esempio di come creare un sito statico con VuePress sui servizi di Hosting di Applicazioni o di Siti Statici di Kinsta da un repository GitHub.

VuePress è un generatore di siti statici che consente di incorporare contenuti dinamici nei file Markdown utilizzando i componenti Vue per produrre pagine HTML statiche. Maggiori informazioni sono disponibili sul sito web di VuePress.

Durante la distribuzione, Kinsta installa automaticamente le dipendenze definite nel file composer.json.

Hosting di Siti Statici

  1. Accedere a GitHub e creare un nuovo repository da questo modello (Use this template > Create a new repository): Kinsta – Hello World – Static Site with VuePress
  2. In MyKinsta, aggiungere un’applicazione con il repository Hello World VuePress e le seguenti Impostazioni di build:
    • Comando di build: npm run build
    • Versione Node: 16.20.0
    • Directory di pubblicazione: ./docs/.vuepress/dist
  3. Il sito è disponibile non appena la build è terminata, e la pagina Hello world si carica all’URL del vostro sito.

Hosting di Applicazioni

  1. Accedere a GitHub e creare un nuovo repository da questo template (Usa questo template > Crea un nuovo repository): Kinsta – Hello World – Static Site with VuePress
  2. In MyKinsta, aggiungere un’applicazione con il repository Hello World VuePress. Il comando Start può essere lasciato vuoto per il processo web, perché Kinsta rileva automaticamente il comando richiesto durante la prima distribuzione.
  3. L’app è disponibile non appena la build è terminata, e l’applicazione pagina Hello world si carica all’URL del vostro sito.

Configurazione del server web

Porta

Kinsta imposta automaticamente la variabile d’ambiente PORT. Non è necessario definirla o codificarla nell’applicazione. Il pacchetto serve utilizza automaticamente la porta impostata da Kinsta.

Comando start

Quando si distribuisce l’applicazione, Kinsta crea automaticamente un processo web con npm start come punto di ingresso.

Ciclo di Vita della Distribuzione

Ogni volta che si avvia una distribuzione (creando un’applicazione o effettuando una nuova distribuzione a causa di un commit in arrivo), viene eseguito il comando npm build, seguito dal comando npm start.

Pagina Hello World

L’applicazione è disponibile non appena la build termina e la pagina Hello World viene caricata sull’URL dell’applicazione o del sito.

La pagina Hello World di VuePress dopo una distribuzione corretta.
La pagina Hello World di VuePress dopo una distribuzione corretta.