Eleventy

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

Eleventyのインストール

以下のコマンドをターミナルで実行して、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

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

GitHubリポジトリの作成

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

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

Cloudflare Pagesでのデプロイ

サイトをPagesにデプロイするには：

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。
3. 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで、Framework presetとして_Eleventy_を選択します。選択により、以下の情報が提供されます。

Configuration option	Value
Production branch	main
Build command	npx @11ty/eleventy
Build directory	_site

ノート

Cloudflare Pagesに最初のサイトをデプロイするための完全なガイドについては、Get started guideを参照してください。

サイトをデプロイした後、プロジェクトのためのユニークなサブドメインが*.pages.devで提供されます。Eleventyサイトに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再構築してデプロイします。また、新しいプルリクエストでプレビューのデプロイメントにアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Eleventy site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.