Deploy Static Site to Cloudflare Pages with GitHub CI Action

This guide explains how to set up a seamless deployment pipeline using Wrangler and GitHub Actions, automatically publishing your project to GitHub Pages via Cloudflare Workers.

---

Prerequisites

Make sure your project meets these conditions.

• Your project builds with npm run build.
• The built site is outputted to a folder named dist.
• You have a custom domain pointing to your GitHub Pages site via Cloudflare.

---

1. Install Wrangler CLI

Wrangler is Cloudflare’s official tool for managing Workers. Install Wrangler as a dev dependency.

npm i --save-dev wrangler

---

2. Create a Wrangler Configuration

Create a file named wrangler.jsonc in your project’s root with the following content.

:::note Replace your-domain.com with your actual domain. :::

wrangler.jsonc

{
  "name": "my-site",
  "main": "dist/index.html",
  "compatibility_date": "2025-03-24",
  "assets": {
    "directory": "build",
    "html_handling": "auto-trailing-slash",
    "not_found_handling": "none",
  },
  "routes": [{ "pattern": "your-domain.com", "custom_domain": true }],
}

---

3. Set up Cloudflare API Token

To authenticate Wrangler, create a Cloudflare API Token:

• Go to Cloudflare API Tokens.
• Click Create Token.
• Use the Edit Cloudflare Workers template with the following permissions:
  • Account - Workers Scripts: Edit
  • Zone - Workers Routes: Edit
  • Zone: your-domain.com (replace with your domain)
• Copy and securely store the API Token once created. You’ll need it in the next steps.

---

4. Configure GitHub Secrets

In your GitHub repository:

• Navigate to Settings > Secrets and variables > Actions.
• Click New repository secret.
• Add these secrets:

Secret Name	Secret Value
CLOUDFLARE_ACCOUNT_ID	Your Cloudflare Account ID
CLOUDFLARE_API_TOKEN	Your Cloudflare API Token

You can find your Account ID on Cloudflare’s dashboard.

---

5. Create a GitHub Actions Workflow

Finally, it’s time to create a GitHub Actions workflow to automate the deployment process. All of our hard work comes together in this workflow file.

.github/workflows/deploy.yml

name: Deploy to Cloudflare Pages via Wrangler

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Publish with Wrangler
        run: npx wrangler publish
        env:
          CLOUDFLARE_API_TOKEN: \${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: \${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

6. Deploying the Project

With this workflow configured:

• Every commit pushed to the main branch will:
  • Install dependencies.
  • Build the project using npm run build.
  • Deploy the contents of the dist folder to Cloudflare Workers via Wrangler.

This automatic deployment pipeline ensures your GitHub Pages site is continuously updated with every commit.

---

Sit back, relax, and let your GitHub Actions do the heavy lifting. Enjoy your continuous deployment setup!