Cloudflare Pagesでサイト公開（1）Astroサイトのデプロイ

静的サイトジェネレータAstroで作成したサイトをCloudflare Pagesで公開する手順をまとめた。SSGであれば他のサイトジェネレーターでもほぼ同じ手順になると思う。

Cloudflare Pages とGithubを連携する

Cloudflareの左サイドバーから「Workers & Pages」をクリック

Pagesタブを選択。GithubにプッシュしたAstroサイトをデプロイするので、上段のGitリポジトリ連携の方で進める。「Connect to Git」ボタンをクリック。

Cludflare Pages はGithubとGitlabに対応している。
Githubと連携するので、Githubタブを選択して「Connect Github」ボタンをクリック。

Githubの認証画面が出てくる。「すべてのリポジトリ」「選択したリポジトリのみ」のいずれかを選ぶ。今回は「選択したリポジトリのみ」と連携する設定にしたが、今後もデプロイしたいリポジトリが出てくるかもしれないので、すべてを選択すればよかったと後悔（Github側で設定は変えられるようである）。

選択したら「Install & Authorize」ボタンをクリックする。

Cloudflare Pagesの画面に戻ってくる。

連携したGithubリポジトリの設定

「Select a repository」でリポジトリを選択する。リポジトリが1個しか表示されていなくても選択して、右にチェックマークが入るようにする。

「Begin setup」ボタンをクリック。

プロジェクト名とプロダクションブランチの項目には、デフォルトでGithubのブランチ名が入る。必要がない限りは変えなくてもよいだろう。

ビルドの設定もCloudflare Pages側でデフォルトで入れてくれる。今回の設定は、

• フレームワーク：Astro
• ビルドコマンド：npm run build
• ビルドで出力されるディレクトリ：/dist

ここも変える必要なさそうなので、このまま「Save and Deploy」ボタンを押す。

デプロイが完了してサイトが作成される。私の場合は、任意の文字列-5cx.pages.devというアドレスになった。

35秒でデプロイが完了したと出ている。Netlifyのときは1分くらいかかっていたので、それに比べるとかなりの爆速である。フレームワークがAstroになった影響もあるのだろうか。

こんなわけで、デプロイまでは非常に簡単だったが、カスタムドメインの設定などやるべきことはまだある（続く）。