静的 HTML

Cloudflare では、任意の静的 HTML サイトを Cloudflare Pages にデプロイできます。フレームワークや静的サイトジェネレーターを使わずにサイトを管理している場合や、使っているフレームワークがフレームワークガイドにない場合でも、このガイドでデプロイできます。

続ける前に

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

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

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

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pages でデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗
Create application を選びます。
Pages タブを選びます。
Import an existing Git repository を選びます。
作成した新しい GitHub リポジトリを選び、Begin setup を選びます。
Set up builds and deployments セクションで、次の情報を入力します。

Configuration option	Value
Production branch	`main`
Build command (optional)	`exit 0`
Build output directory	`<YOUR_BUILD_DIR>`

多くのフレームワークガイドと異なり、サイトのビルドコマンドとビルド出力ディレクトリは完全にカスタムです。プリセットを使わず、サイトのビルドも不要な場合は、Build command に exit 0 を使います。Pages Functions などの機能を使うため、Cloudflare は Build command に exit 0 を使うことを推奨します。Build output directory は、アプリケーションのコンテンツがある場所です。

サイトを設定したら、最初のデプロイを開始できます。指定したカスタムビルドコマンドがあれば実行され、Pages が静的サイトをデプロイします。

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

*.pages.dev で 404 エラーになる場合

*.pages.dev ドメインにアクセスして 404 エラーになる場合は、サイトのトップレベルに index.html があることを確認してください。パスを指定せずにアクセスした場合、Pages はこの index.html を配信します。

さらに学ぶ

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