こちらのページでは、弊社静的サイトホスティングサービスで、GitHubリポジトリからVitePressを使用して静的サイトをセットアップする方法の例をご紹介します。

VitePressはViteとVueを搭載した静的サイトジェネレーターです。詳細はVitePressの公式サイトをご覧ください。

以下のテンプレートは、弊社アプリケーションホスティングでも追加設定なしでお使いいただけます。アプリケーションホスティングを使用する場合、弊社システムが必要なコマンドを自動検出するため、ウェブプロセスのstartコマンドは空白のままにしておいて問題ありません。

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

  1. GitHubにログイン後、「Kinsta – Hello World – Static Site With VitePress」テンプレートから、新規リポジトリを作成します(「Use this template」>「Create a new repository」)。
  2. MyKinstaで、「Hello World – VitePress」リポジトリを使用して静的サイトを追加します。「ビルド設定」が自動入力される場合は、以下の設定と一致していることを確認し、必要に応じて変更してください。
    • ビルドコマンドnpm run build
    • Nodeバージョン:18.16.0
    • 公開ディレクトリ:docs/.vitepress/dist
  3. ビルドが終了するとすぐに静的サイトが利用可能になり、デフォルトのVitePressページが静的サイトのURLを介して表示されます。
VitePressのデプロイ完了後に表示されるデフォルトページ
VitePressのデプロイ完了後に表示されるデフォルトページ

デプロイメントライフサイクル

デプロイメントを開始すると(静的サイトの作成、またはコミットの失敗による再デプロイ)、ビルドコマンドが実行され、Publish Directoryコンテンツがデプロイされます。