Docusaurus v2のコンテンツをCloudflare Pagesで公開する

タイトルの通りです。

参考にしたのはこちら。ほぼこの手順のままですがアップデートされた点もあったので残しておきます。
dev.to

重要なアップデート

一番書きたかったのはここです。

Cloudflare Pagesのフレームワーク選択画面でDocusaurusを認識するようになっているっ...

大まかな流れ

(1)GitHubに空リポジトリを作っておく
↓
(2)手元にDocusaurusをセットアップ
↓
(3)DocusaurusのコンテンツをGitHubにpush
↓
(4)CloudflareでPagesのプロジェクトを作成
↓
(5)build!
↓
(6)サイトのできあがり

成果物はこちらです。
docusaurus-cfpages.pages.dev

(テストとしてDocusaurus初期状態でデプロイしてるのでそのうち消します)

今回の作業ではlocalの作業用ディレクトリ、GitHubのリポジトリ名、Cloudflare PagesのURLをすべて docusaurus-cfpages で作成しました。

(1)GitHubに空リポジトリを作っておく

GitHubでPublicリポジトリを作成しておきます。
READMEも無くてよいでしょう。

(2)手元にDocusaurusをセットアップ

以下はLinux環境での手順です。
DocusaurusはNode.jsのLTS版を動作確認対象としています。今回は16.15.0をpyenv(anyenv)環境で使用しました。

nodejsのインストール

anyenv install nodenv
~/.anyenv/bin/anyenv install --init
eval "$(anyenv init -)"
anyenv install nodenv
exec #SHELL -l
nodenv init
eval "$(nodenv init -)"
nodenv install 16.15.0
nodenv global 16.15.0

Docusaurusのインストール

npx create-docusaurus@latest docusaurus-cfpages classic
cd docusaurus-cfpages

vi docusaurus.config.js (urlを設定します)
  url: 'https://docusaurus-cfpages.pages.dev',

(3)DocusaurusのコンテンツをGitHbにpush

git init
git remote add origin git@github.com:w4yh/docusaurus-cfpages.git
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

(4)CloudflareでPagesのプロジェクトを作成

Cloudflare管理画面にログインします。
Pagesはドメイン選択前のトップ階層のサイドバーメニューにあります。

[プロジェクトを作成] をクリックしてウィザードを開始します

①リポジトリの選択の画面でGitHubまたはGitLabのアカウントとリポジトリを指定します
[セットアップの開始] をクリックします

②ビルドとデプロイのセットアップ画面で以下を指定します。

・フレームワークプリセット: Docusaurus
　プルダウンの選択肢の中にDocusaurusがあります。素晴らしい
・ビルドコマンド: npm runbuild
・ビルド出力ディレクトリ: build
・環境変数: NODE_VERSION = 16.15.0

[保存してデプロイする] をクリックします

(5)build!

③サイトをデプロイ画面に進行状況が表示されます。

成功すると"成功しました！"のメッセージとともにデプロイ先のURLが表示されます。
(今回はhttps://docusaurus-cfpages.pages.dev)

(6)サイトのできあがり

デプロイ先URLをクリックして出来栄えを確認します。

一度デプロイに成功すれば、次回以降のpush(merge)の際は自動的に再デプロイされます。

感想

自前サーバーのGitLab Pagesは使ってきましたが、Cloudflare Pagesもとてもお手軽で良いです。
Docusaurus以外にも多様なプリセットが指定可能なので一部のスクショを載せておきます。

Empowered by expect

希望は体力