Docusaurus

Docusaurus ↗ は静的サイトジェネレーターです。これは、クライアントサイドのナビゲーションが高速なシングルページアプリケーションを構築し、Reactの全機能を活用してサイトをインタラクティブにします。すぐに使えるドキュメンテーション機能を提供しますが、個人のウェブサイト、製品サイト、ブログ、マーケティングランディングページなど、あらゆる種類のサイトを作成するために使用できます。

新しいプロジェクトのセットアップ

create-cloudflare ↗ CLI (C3) を使用してプロジェクトをセットアップします。C3は新しいプロジェクトディレクトリを作成し、Docusaurusの公式セットアップツールを開始し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいDocusaurusプロジェクトを作成するには、次のコマンドを実行します：

npm

npm create cloudflare@latest -- my-docusaurus-app --framework=docusaurus

yarn

yarn create cloudflare@latest my-docusaurus-app --framework=docusaurus

pnpm

pnpm create cloudflare@latest my-docusaurus-app --framework=docusaurus

create-cloudflareは、Wrangler CLIや必要なアダプターを含む追加の依存関係をインストールし、セットアップに関する質問を行います。

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 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でデプロイ

Deploy via the create-cloudflare CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Docusaurus project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

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

Configuration option	Value
Production branch	main
Build command	npm run build
Build directory	build

サイトをデプロイした後、*.pages.dev上のプロジェクト用のユニークなサブドメインを受け取ります。

Docusaurusサイトに新しいコードをコミットし、その変更をGitHubにプッシュするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストでプレビューのデプロイにアクセスでき、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

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

Learn more

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