Cloudflare Pagesでサイト公開(1)Astroサイトのデプロイ

Web関連情報・技術

当サイトにはプロモーション・広告が含まれています。

静的サイトジェネレータ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になった影響もあるのだろうか。

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

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

広告