KinstaでVuePressを使って静的サイトをセットアップする

こちらのページでは、弊社アプリケーションホスティングまたは静的サイトホスティングを使って、VuePressで静的サイトをセットアップする方法の例をご紹介します。

VuePressは静的なHTMLページを生成するため、Vueコンポーネントを使用して、Markdownファイル内に動的コンテンツを埋め込むことができる静的サイトジェネレータです。詳細は、VuePressの公式サイトをご覧ください。

Kinstaでは、デプロイメントの処理中に、composer.jsonファイルで定義された依存関係が自動でインストールされます。

静的サイトホスティング

GitHubにログインし、「Kinsta – Hello World – Static Site with VuePress」テンプレートからリポジトリを新規作成します（「Use this template」＞「Create a new repository」）。
MyKinstaに移動し、作成したリポジトリと以下のビルド設定でアプリケーションを追加します。
- ビルドコマンド：npm run build
- Nodeのバージョン：16.20.0
- 公開ディレクトリ：./docs/.vuepress/dist
ビルドが終了すると、Hello Worldページが表示され、すぐに静的サイトをご利用いただけます。

GitHubにログイン後、「Kinsta – Hello World – Static Site with VuePress」テンプレートから、新規リポジトリを作成してください（「Use this template」＞「Create a new repository」）。
MyKinstaで、vuepressリポジトリを使用してアプリケーションを追加します。最初のデプロイ時に必要なコマンドが自動で検出されるため、ウェブプロセスの「startコマンド」は空白のままにしてください。
ビルドが終了すると、Hello worldページが表示され、すぐにアプリケーションをご利用いただけます。

環境変数PORTは自動で設定されるため、アプリケーションに定義したり、ハードコーディングで記述したりする必要はありません。serveパッケージには、弊社で設定したポートが自動的に使用されます。

アプリケーションをデプロイすると、npm startをエントリーポイントとしてウェブプロセスが自動で作成されます。

デプロイメントを開始すると（アプリケーションの作成、またはコミットの失敗による再デプロイ)、npm buildコマンド、その後にnpm startコマンドが実行されます。

ビルドが終了すると、Hello worldページが表示され、すぐにアプリケーションまたは静的サイトをご利用いただけます。