Dies ist ein Beispiel dafür, wie du eine statische Seite mit VuePress auf Kinsta’s Anwendungs-Hosting oder statischen Website-Hosting-Leistungen aus einem GitHub-Repository einrichtest.
VuePress ist ein Generator für statische Seiten, mit dem du mithilfe von Vue-Komponenten dynamische Inhalte in deine Markdown-Dateien einbetten kannst, um statische HTML-Seiten zu erstellen. Weitere Informationen findest du auf der VuePress Website.
Kinsta installiert während der Bereitstellung automatisch die in deiner composer.json-Datei definierten Abhängigkeiten.
Statische Seiten Hosting
- Melde dich bei GitHub an und erstelle ein neues Repository mit diesem Template (Dieses Template verwenden > Ein neues Repository erstellen): Kinsta – Hello World – Statische Seite mit VuePress
- Füge in MyKinsta eine Anwendung mit dem Hello World VuePress-Repository und den folgenden Build-Einstellungen hinzu:
- Build-Befehl:
npm run build - Node Version: 16.20.0
- Öffentliches Verzeichnis: ./docs/.vuepress/dist
- Build-Befehl:
- Die Seite ist verfügbar, sobald der Build abgeschlossen ist, und die Hello World Seite unter der URL deiner Seite geladen wird.
Anwendungs Hosting
- Melde dich bei GitHub an und erstelle ein neues Repository mit diesem Template (Diese Template verwenden > Neues Repository erstellen): Kinsta – Hello World – Statische Seite mit VuePress
- In MyKinsta fügst du eine Anwendung mit dem Hello World VuePress Repository hinzu. Der Startbefehl kann für den Webprozess leer gelassen werden, da Kinsta den erforderlichen Befehl bei der ersten Bereitstellung automatisch erkennt.
- Die App ist verfügbar, sobald der Build abgeschlossen ist und die Hello World-Seite unter der URL deiner Anwendung geladen wird.
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du musst sie nicht definieren oder in der Anwendung fest programmieren. Das serve-Paket verwendet den von Kinsta eingestellten Port automatisch.
Startbefehl
Wenn du die Anwendung bereitstellst, erstellt Kinsta automatisch einen Webprozess mit npm start als Startbefehl.
Lebenszyklus der Bereitstellung
Immer wenn du eine Bereitstellung initiierst (durch die Erstellung einer Anwendung oder eine erneute Bereitstellung aufgrund eines eingehenden Commits), wird der Befehl npm build the ausgeführt, gefolgt von dem Befehl npm start.
Hello World Seite
Die App oder Seite ist verfügbar, sobald der Build abgeschlossen ist und die Hello World-Seite wird unter der URL deiner Anwendung oder statischen Seite geladen.
