VuePress

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

VuePress è un generatore di siti statici che permette 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.

Potete utilizzare questo template di avvio rapido anche sull’Hosting di Applicazioni di Kinsta senza alcuna configurazione aggiuntiva. Con l’Hosting di Applicazioni, il comando Start può essere lasciato vuoto per il processo web poiché Kinsta rileva automaticamente il comando richiesto durante la prima distribuzione.

Prerequisiti

  • I template di avvio rapido di Kinsta sono archiviati e gestiti su GitHub; pertanto, per accedervi è necessario avere un account GitHub.
  • Sarà anche necessario creare un account MyKinsta per distribuire l’applicazione.

Distribuire un sito statico VuePress

  1. Accedete a GitHub e create un nuovo repository da questo template (Use this template > Create a new repository): Kinsta – Hello World – Static Site with VuePress.
  2. In MyKinsta, cliccate su Siti statici > Aggiungi sito > selezionate GitHub, cliccate su Connetti provider git > Autorizza e accedete all’account GitHub.
  3. Scegliete il repository Hello World VuePress, cliccate su Continua e inserite quanto segue nelle impostazioni di Build:
    • Comando di Build: npm run build
    • Versione Node: 16.20.0
    • Directory di pubblicazione:./docs/.vuepress/dist

Kinsta installa automaticamente le dipendenze definite nel file composer.json durante il processo di distribuzione. Il sito è disponibile non appena la distribuzione termina e la pagina Hello world viene caricata all’URL del sito.

Applicazione VuePress
Applicazione VuePress.

Ciclo di vita della distribuzione

Ogni volta che avviate una distribuzione (attraverso la creazione di un’applicazione o una nuova distribuzione a seguito di un commit in entrata), viene eseguito il comando npm build, seguito dal comando npm start.

Questo articolo ti è stato utile?