An opinionated fork of the official Cloudflare Pages Action.

A GitHub Action for creating Cloudflare Pages deployments, using Direct Upload with Wrangler.

• ✅ Generated build summaries
• ✅ Deploy multiple sites from a single monorepo
• ✅ Builds site previews of PRs from forked repositories, a known issue with official solutions
• ✅ GitHub Deployments on PRs from forks

1. Locate your Cloudflare account ID.
2. Generate an API token.
3. Add the Cloudflare account ID and API token as secrets to your GitHub repository.
4. Create a .github/workflows/publish.yml file in your repository:

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Publish to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Run a build step here if your project requires one

      - name: Publish to Cloudflare Pages
        uses: AdrianGonz97/refined-cf-pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          projectName: YOUR_PROJECT_NAME
          directory: YOUR_BUILD_OUTPUT_DIRECTORY
          # Optional: Supply a deployment name if you want to have GitHub Deployments triggered
          deploymentName: Production
          # Optional: Switch what branch you are publishing to.
          # By default, this will be the branch which triggered this workflow
          branch: main
          # Optional: Change the working directory
          workingDirectory: my-site
          # Optional: Change the Wrangler version, allows you to point to a specific version or a tag such as `beta`
          wranglerVersion: '3'

5. Replace YOUR_PROJECT_NAME and YOUR_BUILD_OUTPUT_DIRECTORY with the appropriate values to your Pages project.

And you're ready to go!

To find your account ID, log in to the Cloudflare dashboard > select your zone in Account Home > find your account ID in Overview under API on the right-side menu. If you have not added a zone, add one by selecting Add site.

If you do not have a zone registered to your account, you can also get your account ID from the pages.dev URL. E.g: https://dash.cloudflare.com/<ACCOUNT_ID>/pages

To generate an API token:

1. Log in to the Cloudflare dashboard.
2. Select My Profile from the dropdown menu of your user icon on the top right of your dashboard.
3. Select API Tokens > Create Token.
4. Under Custom Token, select Get started.
5. Name your API Token in the Token name field.
6. Under Permissions, select Account, Cloudflare Pages and Edit:
7. Select Continue to summary > Create Token.

1. Go to your project’s repository in GitHub.
2. Under your repository’s name, select Settings.
3. Select Secrets and variables > Actions > New repository secret.
4. Create a secret and put CLOUDFLARE_ACCOUNT_ID as the name with the value being your Cloudflare account ID.
5. Create another secret and put CLOUDFLARE_API_TOKEN as the name with the value being your Cloudflare API token.

If you have already connected your repository to the Cloudflare Pages GitHub integration, you'll need to disable it.

1. Go to your project’s repository in GitHub.
2. Under your repository’s name, select Settings.
3. Select GitHub Apps, and next to Cloudflare Pages, select Configure
4. Under Repository access, select Only select repositories, and remove your repository.

Enabling PR previews from forks requires the use of the pull_request_target event in the workflow, which has security concerns around exposing secrets that need to be considered before implementing it into your project.

If your site does not use/have any secrets during the build step or in your preview environment on Cloudflare, then it should be fine to use as-is. We use this method in Formsnap and its implementation can be found in this workflow file.

name: Preview Deployment
on:
  pull_request_target:

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      deployments: write
    name: Deploy Preview to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.ref }}
          repository: ${{ github.event.pull_request.head.repo.full_name }}

      # Run your install/build steps here

      - name: Deploy to Cloudflare Pages
        uses: AdrianGonz97/refined-cf-pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          projectName: YOUR_PROJECT_NAME
          directory: YOUR_BUILD_OUTPUT_DIRECTORY
          deploymentName: Preview

If your project does use secrets, then the deployment job can be fitted with an environment field that requires manual approval before each deployment (like it does in this Melt UI workflow).

Manual approval using environments needs to be setup at the repo level, as described in this Melt UI PR under the "Make the Preview environment protected" step.

name: Preview Deployment
on:
  pull_request_target:

jobs:
  deploy-preview:
    environment: Preview # The name of the environment that requires manual approval before each deployment
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      deployments: write
    name: Deploy Preview to Cloudflare Pages
    steps:
      - uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.ref }}
          repository: ${{ github.event.pull_request.head.repo.full_name }}

      # Run your install/build steps here

      - name: Build site
        run: pnpm build
        env:
          SOME_SECRET: 'foo' # Uses some secret during build!

      - name: Deploy to Cloudflare Pages
        uses: AdrianGonz97/refined-cf-pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          projectName: YOUR_PROJECT_NAME
          directory: YOUR_BUILD_OUTPUT_DIRECTORY
          deploymentName: Preview

The branch name is used by Cloudflare Pages to determine if the deployment is production or preview. Read more about git branch build controls.

If you are in a Git workspace, Wrangler will automatically pull the branch information for you. You can override this manually by adding the argument branch: YOUR_BRANCH_NAME.

By default Wrangler will run in the root package directory. If your app lives in a monorepo and you want to run Wrangler from its directory, add workingDirectory: YOUR_PACKAGE_DIRECTORY.