Starlightでマニュアルを作る #4 Cloudflare Pagesでデプロイしてドメインを接続する

#3まで来ると、ローカルで見栄えの良いドキュメントが整います。しかしlocalhostは自分しか見られません。今回の記事では、このドキュメントを誰でもアドレスでアクセスできるように送り出します。

今回のシリーズはStarlightでマニュアルを作る全6回です。

• #1 インストールから最初のドキュメントまで
• #2 サイドバーと検索 — ドキュメントの情報構造を整える
• #3 コンテンツ作成 — コードブロック、Mermaid、aside
• #4 Cloudflare Pagesでデプロイしてドメインを接続する ← 今回の記事
• #5 多言語とバージョン管理
• #6 メンテナンス — 検索、アクセシビリティ、ドキュメント文化

今回の記事は、GitHubに上げ、Cloudflare Pagesに接続してビルドを設定し、カスタムドメインを付けるところまで扱います。

GitHubに上げる #

ビルド成果物と依存関係はリポジトリに入れないよう、.gitignoreから整えます。Astroのビルド成果物はdistフォルダです。

dist/
node_modules/
.astro/

続いてリポジトリを初期化してプッシュします。

git init
git add .
git commit -m "docs: 最初のドキュメント"
git branch -M main
git remote add origin https://github.com/自分のアカウント/my-docs.git
git push -u origin main

Cloudflare Pagesに接続 #

CloudflareのダッシュボードでWorkers & Pages → Create → Pages → Connect to Gitからリポジトリを選択します。AstroはNodeプロジェクトなのでビルド設定が単純です。

Nodeバージョンはローカルと合わせるのが安全です。Save and Deployを押すと最初のデプロイが始まり、終わるとプロジェクト名.pages.devのアドレスができます。以降はmainにプッシュするたびに自動で再ビルドされます。#2で見た検索インデックスも、このビルド段階で一緒に作られます。

カスタムドメイン接続 #

pages.devのアドレスの代わりに、自分で買ったドメインを付けます。PagesプロジェクトのCustom domains → Set up a domainでドメインを入力します。別の場所でDNSを管理しているなら、次のレコードを自分で入れます。

タイプ   名前     値
CNAME   docs     プロジェクト名.pages.dev

接続が終わると、HTTPS証明書はCloudflareが自動で発行・更新します。カスタムドメインを使うときは、astro.config.mjsのsite値もそのアドレスに合わせます。検索とサイトマップが正しい絶対アドレスを使うようにするためです。

まとめ #

今回の記事ではドキュメントをGitHubに上げ、Cloudflare Pagesに接続してAstroのビルドを設定し、カスタムドメインまで付けました。これでドキュメントは本当のアドレスを持ってインターネットに公開されています。

次回は多言語とバージョン管理を扱います。一つのドキュメントを複数の言語で提供し、製品バージョンが上がるときに古いドキュメントをどう一緒に維持するかを整理します。