KinstaとEleventyで静的サイトをセットアップする方法

2023年10月30日

このページでは、Kinstaのアプリケーションまたは静的サイトホスティングサービスと、GitHubリポジトリを使ってEleventy静的サイトをセットアップする方法の一例をご紹介します。

EleventyはJavaScriptベースの静的サイトジェネレーターです。開発者による高速かつモダンなウェブサイト構築を可能にします。詳細はEleventy公式サイトをご覧ください。

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

静的サイトホスティング

GitHubにログインし、次のテンプレートから新しいリポジトリを作成（「Use this template」＞「Create a new repository」）：Kinsta – Hello World – Eleventy
MyKinstaで、Hello World Eleventyリポジトリと以下のビルド設定で静的サイトを追加
- ビルドコマンド：npx @11ty/eleventy
- Nodeのバージョン：18.16.0
- 公開ディレクトリ：_site
ビルドが終了するとすぐにサイトが利用可能になり、KinstaのウェルカムページのURLが表示されます。

GitHubにログインし、次のテンプレートから新しいリポジトリを作成（「Use this template」＞「Create a new repository」）：Kinsta – Hello World – Eleventy
MyKinstaで、Hello World Eleventyリポジトリを使ってアプリケーションを追加（Kinstaが最初のデプロイ時に必要なコマンドを自動で検出するため、ウェブプロセスのstartコマンドは空白のままにしておいて問題ありません）
ビルドが終了するとすぐにアプリが利用可能になり、KinstaのウェルカムページのURLが表示されます。

Kinstaにより自動でPORT環境変数が設定されます。自分で定義したり、アプリケーションにハードコーディングで記述したりしないでください。

アプリケーションのデプロイ時に、Kinstaにより自動でstartコマンドとしてnpm startを用いてウェブプロセスが作成されます。必ずこのコマンドを使用してサーバーを実行してください。

デプロイが開始されるたびに（アプリケーションの作成またはコミットの受信による再デプロイ）、npm buildコマンドが実行され、npm startコマンドが続きます。

ビルドが終了するとすぐにアプリまたはサイトが利用可能になり、KinstaのウェルカムページのURLが表示されます。