Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Docusaurus

最終更新 Markdown で表示Agent セットアップ

Docusaurus ↗ は静的サイトジェネレーターです。高速なクライアントサイドナビゲーションを備えたシングルページアプリケーションをビルドし、React の機能を活かしてサイトをインタラクティブにします。ドキュメント向けの機能が最初から用意されていますが、個人サイト、製品サイト、ブログ、マーケティング用ランディングページなど、さまざまなサイトにも使えます。

新しいプロジェクトをセットアップする

create-cloudflare ↗ CLI（C3）でプロジェクトをセットアップします。C3 は新しいプロジェクトディレクトリを作成し、Docusaurus 公式のセットアップツールを起動し、すぐにデプロイする選択肢も提示します。

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

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

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

続ける前に

すべてのフレームワークガイドは、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 でデプロイする

create-cloudflare CLI（C3）でデプロイする

create-cloudflare（C3） ↗ で新しい Docusaurus プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

Cloudflare ダッシュボードからデプロイする

サイトを 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 に Docusaurus を選びます。選ぶと、次の情報が表示されます。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリbuild

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。

Docusaurus サイトに新しいコードをコミットして GitHub へプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使え、本番へデプロイする前にサイトの見た目を確認できます。

Cloudflare Pages への初回デプロイの全体手順は、Get started ガイド を参照してください。

さらに学ぶ

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

役に立ちましたか？