はじめに

この記事では、Astro で作ったサイトを Cloudflare Pages に無料でデプロイする方法を解説します。

GitHubにプッシュするだけで自動デプロイされる環境が5分程度で構築できます。

前提条件

  • GitHub アカウント
  • Cloudflare アカウント（無料）
  • Node.js v18以上

手順

1. Astro プロジェクトを用意する

npm create astro@latest my-site
cd my-site
npm install

2. GitHub にプッシュする

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/YOUR_NAME/YOUR_REPO.git
git push -u origin main

3. Cloudflare Pages でプロジェクトを作成する

  1. Cloudflare Dashboard にアクセス
  2. 「Workers & Pages」→「Create application」→「Pages」
  3. 「Connect to Git」でGitHubリポジトリを選択

4. ビルド設定

項目設定値
フレームワークAstro
ビルドコマンドnpm run build
出力ディレクトリdist

5. デプロイ完了

「Save and Deploy」ボタンを押すと自動的にビルドとデプロイが始まります。完了すると *.pages.dev ドメインでアクセスできるようになります。

まとめ

  • GitHubと連携すれば、プッシュのたびに自動デプロイされる
  • 独自ドメインも無料で設定可能
  • Cloudflare Web Analytics で無料のアクセス解析も使える

参考