Hugoによるブログ準備 の続き。いよいよ本番環境へのデプロイ環境を構築した。

Cloudflare PagesはGitHubとの直接連携も可能らしいが、今回は使い慣れているGitHub Actionsを使って、git push をトリガーに自動ビルド＆デプロイされるワークフローを組むことにした。

手順としては非常にシンプルで、以下の通りとした。

  1. 最初に wrangler でPagesのプロジェクトを作成し、手動で初回のデプロイを行う。
  2. 連携に必要な アカウントID: CLOUDFLARE_ACCOUNT_IDと APIトークン: CLOUDFLARE_API_TOKEN を取得する（WebUIからポチポチするのだが方法は失念）。
  3. GitHubリポジトリのSecretsにそれぞれ登録する。
  4. ワークフロー（yamlファイル）を作成する。

Wranglerによる手動デプロイ

$ npx wrangler pages deploy public

 ⛅️ wrangler 4.95.0
───────────────────
? No project specified. Would you like to create one or use an existing project? › - Use arrow-keys. Return to submit.
❯   Create a new project
    Use an existing project

Create a new project を選択し適当にプロジェクト名を決めて入れる(souki-taishoku-is-not-fireは変更)。

✔ Enter the name of your new project: … souki-taishoku-is-not-fire
✔ Enter the production branch name: … main

これでpublic/にあるコンテンツがデプロイされる。Cloudflare側にプロジェクトが作られる。

GitHub Actionsのワークフロー定義

事前に、CLOUDFLARE_API_TOKENとCLOUDFLARE_ACCOUNT_IDは⚙️Settings > Secrets and variables > Actions > Repository secrets に登録しておく。

.github/workflows/deploy.yml として以下の通り定義した。

なお、こちらもsouki-taishoku-is-not-fire部分はご自身のCloudflare pagesプロジェクト名に置き換えていただきたい。

name: Deploy static content to Cloudflare Pages

on:
  push:
    branches: ["main"]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: 'recursive'

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: '0.160.1'
          extended: true

      - name: Build
        run: hugo

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: 'souki-taishoku-is-not-fire'
          directory: './public'