Eleventy

Eleventy ↗ はシンプルな静的サイトジェネレーターです。このガイドでは、新しい Eleventy サイトを作成し、Cloudflare Pages でデプロイします。新しい Eleventy サイトの作成には eleventy CLI を使います。

ターミナルで次のコマンドを実行し、eleventy CLI をインストールします。

npm install -g @11ty/eleventy

Eleventy のサイトには、多くの スタータープロジェクト ↗ があります。例として、ターミナルで次のコマンドを実行し、eleventy-base-blog プロジェクトを使います。

git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
cd my-blog-name
npm install

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

repo.new ↗ を開いて、新しい GitHub リポジトリを作成します。リポジトリを作成したら、ターミナルで次のコマンドを実行し、ローカルのアプリケーションを GitHub にプッシュします。

git remote set-url origin https://github.com/yourgithubusername/githubrepo
git branch -M main
git push -u origin main

サイトを Pages にデプロイする手順は次のとおりです。

1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

   Workers & Pages を開く ↗

2. Create application を選択します。

3. Pages タブを選択します。

4. Import an existing Git repository を選択します。

5. 作成した新しい GitHub リポジトリを選択し、Begin setup を選択します。

6. Build settings セクションで、Framework preset に Eleventy を選びます。選ぶと、次の情報が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Eleventy サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。

このガイドを完了すると、Eleventy サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。