Gatsby

Gatsby ↗は、ウェブサイトやアプリを作成するためのオープンソースのReactフレームワークです。このガイドでは、新しいGatsbyアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。新しいGatsbyサイトを作成するために、gatsby CLIを使用します。

Gatsbyのインストール

ターミナルで以下のコマンドを実行して、gatsby CLIをインストールします。

npm install -g gatsby-cli

新しいプロジェクトの作成

Gatsbyがインストールされたら、gatsby newを使用して新しいプロジェクトを作成できます。newコマンドは、既存のテンプレートを使用するためのGitHub URLを受け付けます。例として、以下のコマンドをターミナルで実行して、gatsby-starter-lumenテンプレートを使用します。詳細はGatsbyのスターターセクション ↗で確認できます。

npx gatsby new my-gatsby-site https://github.com/alxshelepenok/gatsby-starter-lumen

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.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

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

Cloudflare Pagesでのデプロイ

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

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pages > アプリケーションの作成 > Pages > Gitに接続を選択します。
3. 作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで以下の情報を提供します。

Configuration option	Value
Production branch	main
Build command	npx gatsby build
Build directory	public

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesがgatsby、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイするのを見ることができるはずです。

ノート

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

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

動的ルート

Gatsbyプロジェクトで動的ルート ↗を使用している場合、これらのルートが有効になるようにプロキシリダイレクトを設定します。

動的ルートがある場合、例えば/users/[id]のように、以下の例を参照してプロキシリダイレクトを作成します。

/users/* /users/:id 200

Learn more

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