新規リポジトリ作成#

GitHubにログインし、画面右上の「+」アイコンから「新しいリポジトリ」を選択します。リポジトリ名は自由に設定できますが、プロジェクト名と合わせて管理しやすくなります。

リポジトリの公開設定はパブリックでもプライベートでもどちらでもありません。Cloudflare ページはどちらにも対応しています。README やライセンスファイルの追加はスキップして、空のリポジトリとして作成します。

作成後、表示されるリポジトリのURLをコピーしておきます。このURLは次のステップで使用します。

ローカルのAstroプロジェクトをコミットする#

ターミナルでAstroプロジェクトのルートディレクトリに移動し、Gitの初期化を行います。 まだ.gitフォルダが存在しない場合は、以下のコマンドで初期化します。

1
git init

1
git add .
2
git commit -m "Initial commit"

コミットメッセージこれが一般的ですが、自由に変更できます。 これでローカルリポジトリにプロジェクトの初回スナップショットが保存されました。

GitHubへプッシュ#

その時作成したGitHubリポジトリをリモートとして追加します。usernameとrepositoryは実際のユーザー名とリポジトリ名に置き換えてください。

1
git remote add origin https://github.com/<username>/<repository>.git
2
git branch -M main
3
git push -u origin main

Pushが完了しましたら、GitHubのリポジトリページを更新して、ファイルが正しくアップロードされたか確認します。すべてのプロジェクトファイルが表示されていれば成功です。

ここまでできたら、ブラウザでCloudflare側の作業に移ります。

CloudflareダッシュボードでPagesを開く#

Cloudflareのアカウントを作成し、ログインします。

ダッシュボードで Workers & Pages に移動し、右上のCreate application から Pages の作成フローに入ります。

以降は「既存のGitリポジトリを取り込む」形で、GitHub連携→リポジトリ選択→ビルド設定→デプロイ、という流れで進めます。

GitHub連携（Connect to Git）#

画面の案内に従って Connect to Git を選び、GitHubでサインイン（Install & Authorize）してCloudflare Pagesに権限を付与します。

なお、Workers&Pagesなので、デフォルトでは Workers の設定画面が表示されます。 めっちゃわかりづいのですが、画面下部のPagesの方を選択します。

そして、上の選択肢を選択。

この連携により、Pagesがリポジトリをデプロイできるようになり、Pull Requestにはプレビュー環境（preview deployments）も付与されます。

リポジトリを選択する#

連携が完了すると、Cloudflare Pagesからデプロイ対象のGitHubリポジトリを選択できるようになります。 個人アカウントだけでなく、Pagesにアクセス権を与えたOrganizationのリポジトリも選択でき、Public/Privateどちらのリポジトリにも対応しています。

ビルド＆デプロイ設定（Astroの例）#

リポジトリを選んだら Begin setup を押して、Set up builds and deployments でビルド設定を入力します。

Astroの場合、Production branchは main、Build commandは npm run build、Build directoryは dist を指定します。 Framework presetをAstroに設定すると自動で入力されるはずです。

プロジェクト名（Project name）はデフォルトでリポジトリ名になりますが、任意の名前に変更でき、その値が *.pages.dev のサブドメインとして使われます。

通常、Cloudflare Pagesはリポジトリのルートディレクトリを起点にビルドを実行しますが、monorepoなどでサブディレクトリ配下をビルドしたい場合は、Root directory (advanced) でPathを指定します。 よくわからない時は設定しなくてOK.

Save and Deploy（初回デプロイ）#

設定ができたら Save and Deploy を押すと、依存関係のインストール→ビルド→デプロイが実行され、ログが表示されます。 デプロイ完了後は、サイト確認用のユニークURLが払い出されます。

自動デプロイとプレビュー#

Git連携したので、以後はコミットをpushするたびに自動でビルド＆デプロイが走ります。

また、Production branch以外のブランチはプレビュー用デプロイとして扱われ、Pull Requestの変更を本番反映前に実URLで確認できます。

CloudFlareで状態を確認する#

ダッシュボードで Workers & Pages に移動し、先ほど作成したプロジェクト名を選択します。

右上のvisitをクリックすれば、払い出されたサブドメインのURLにアクセスできます。

実際の表示画面#

このようにURLにアクセスすると記事一覧画面が出ました！

これは世界中からアクセスできます。 もちろん、AstroにセットアップしたPCをシャットダウンしても関係ありません。CloudFlareのサーバーが表示しているので。

個別の記事についてもうまく表示されましたね！ お疲れ様でした。