Kinstaの静的サイトホスティングでは、簡単に静的サイトを構築し公開することができます。

静的サイトの追加

新たに静的サイトを追加するには「静的サイト」ページで「静的サイトを追加」をクリックします。

初めて静的サイトを追加するときには、アカウントからGitサービスとリポジトリを選択する必要があります。以下のいずれか（またはすべて）から選択可能です。

Gitサービスのアカウントに接続したら、MyKinsta に戻り「静的サイトの追加」手順の続きを行います。

続いて表示されるフォームには、以下のフィールドがあります。

詳細

ブランチの選択

サポートされているGitサービスから選択することができます。

  • リポジトリ：使用するGitリポジトリを選択してください。
  • デフォルトのブランチ：コミット時または手動でデプロイするブランチを設定できます。
  • コミットに際し自動でデプロイ：上記で選択したブランチにコミットが行われるたびに、サイトを自動でデプロイするかどうかを選択します。

基本情報

  • 表示名：この名前はMyKinstaに表示されるもので、識別に利用されます。他の静的サイト、アプリケーション、またはWordPressサイトと同じ名前は使用できません。

ビルド設定

ビルド設定は静的サイトのビルド方法を決定します。サイトが自動的に検出されたフレームワークの1つを使用している場合、ビルドコマンドと公開ディレクトリが自動的に設定され、フレームワークが検出されたことを伝える通知が表示されます。自動入力されフィールドの内容が正しいかどうかを確認してください。

ビルド設定

  • ビルドコマンド：（任意）静的サイトのビルドコマンドが必要な場合は、ここに入力してください。
  • Nodeのバージョン：（任意）ビルドコマンドを入力する場合は、互換性を確保し、エラーを回避するために、ビルドプロセス中に使用するNode.jsのバージョンを指定できます。
  • 公開ディレクトリ：（任意）空白の場合、リポジトリのルートフォルダがデフォルトになります。
    • 特定のサブディレクトリを使ってサイトを公開したい場合は、リポジトリルートからの相対パスを入力してください。
    • ビルドする必要のないHTMLサイトを特定のサブディレクトリから実行するには、そのディレクトリにサイトファイルを配置し、リポジトリルートからの相対パスをここに入力してください。

フレームワークの自動検出

package.jsonファイルで使用されている依存関係を確認し、フレームワークを自動的に検出します。以下のフレームワークのいずれかが検出された場合は、ビルドコマンドと公開ディレクトリのフィールドが自動入力されます。また、リポジトリにyarn.lockファイルがあるかどうかを確認し、見つかった場合には、ビルドコマンドにはnpmコマンドではなく、同等のyarnコマンドが自動入力されます。

フレームワーク ビルドコマンド 公開ディレクトリ
Astro yarn build
npm run build		 dist
ElderJS yarn build
npm run build		 public
Gatsby yarn build
npm run build		 public
Next.js yarn build
npm run build		 out
Nuxt yarn generate
npm run generate		 .output/public
React (+ Create React App) yarn build
npm run build		 build
React (+ Vite) yarn build
npm run build		 dist

自動検出されるフレームワークに追加したいフレームワークをご利用の場合は、カスタマーサポートまでチャットにてご連絡ください。

環境変数

環境変数を使うことで、API キーなど、明確なテキストとしてコードに記述すべきでない情報をビルドプロセスに付与することができます。環境変数のキーと値のペアを追加してください。環境変数は、サイト作成後に設定ページで追加、編集、削除可能です。

最後に「サイトを作成」をクリックして、サイトのデプロイを開始します。

関連ドキュメント