静的サイトジェネレータ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になった影響もあるのだろうか。
こんなわけで、デプロイまでは非常に簡単だったが、カスタムドメインの設定などやるべきことはまだある（続く）。
☕コーヒーをおごる
