Skip to content
upload-cloud

GitHub Action

GitHub Action for Cloudflare Pages

v2.4.1 Latest version

GitHub Action for Cloudflare Pages

upload-cloud

GitHub Action for Cloudflare Pages

Deploy to Cloudflare Pages

Installation

Copy and paste the following snippet into your .yml file.

 
              
- name: GitHub Action for Cloudflare Pages

              
  uses: andykenward/[email protected]
Learn more about this action in andykenward/github-actions-cloudflare-pages

Choose a version

test Check dist/ release pre-commit.ci status

GitHub Action Cloudflare Pages

This action deploys your build output to Cloudflare Pages using Wrangler. GitHub Environments and GitHub Deployment are used to keep track of the Cloudflare Pages deployments.

When used in context of a pull request, the action will create a deployment for the pull request and add a comment with the URL of the deployment.

GitHub Environments - (Required)

This GitHub Action doesn't create the required GitHub Environments, see below for more information.

The GitHub Action uses GitHub Environments for the deployments. This GitHub Action doesn't create GitHub Environments, this is due to the required permission of administration:write by the GitHub API, you will have to do this manually, see Creating an environment.

For example manually create two GitHub Environments called "production" & "preview". Then you can define them in the workflow yaml step for github-environment as the below example. The check for github.ref == 'refs/heads/main' is used to switch between these two GitHub Environments, main Git branch for "production" and any other branch will use "preview".

github-environment: ${{ (github.ref == 'refs/heads/main' && 'production') || 'preview' }}

Upgrading

If you have previous deployments using an older version of this GitHub Action please see the CHANGELOG.md for breaking changes.

Permissions

The permissions required for this GitHub Action when using the created GITHUB_TOKEN by the workflow for the github-token field.

permissions:
  actions: read # Only required for a private GitHub Repo.
  contents: read
  deployments: write
  pull-requests: write

Inputs

cloudflare-api-token:
  description: 'Cloudflare API Token'
  required: true
cloudflare-account-id:
  description: 'Cloudflare Account ID'
  required: true
cloudflare-project-name:
  description: 'Cloudflare Pages project to upload to'
  required: true
directory:
  description: 'Directory of static files to upload'
  required: true
github-token:
  description: 'Github API key, make sure to add the required permissions for this action.'
  required: true
github-environment:
  description: 'GitHub environment to deploy to. You need to manually create this for the github repo'
  required: true
working-directory:
  description: 'Directory to run wrangler cli from'
  required: false
wrangler-version:
  description: 'Override default wrangler version to use'
  required: false

Outputs

id:
  description: 'Cloudflare Pages deployed id'
  value: ${{ steps.action.outputs.id }}
url:
  description: 'Cloudflare Pages deployed url'
  value: ${{ steps.action.outputs.url }}
environment:
  description: 'Cloudflare Pages deployed environment "production" or "preview"'
  value: ${{ steps.action.outputs.environment }}
alias:
  description: 'Cloudflare Pages deployed alias. Fallsback to deployed url if deployed alias is null'
  value: ${{ steps.action.outputs.alias }}
wrangler:
  description: 'Wrangler cli output'
  values: ${{ steps.action.outputs.wrangler }}

Examples

See the GitHub Workflow examples below or .github/workflow-templates/deploy.yml

push & pull_request

# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
name: 'Deployment'
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    permissions:
      actions: read # Only required for private GitHub Repo
      contents: read
      deployments: write
      pull-requests: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node_version: 20
      - run: npm ci
        run: npm run build
      - name: Deploy to Cloudflare Pages
        uses: andykenward/[email protected]
        id: pages
        with:
          cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          cloudflare-account-id: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}
          cloudflare-project-name: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
          directory: dist
          github-token: ${{ secrets.GITHUB_TOKEN }}
          github-environment: ${{ vars.CLOUDFLARE_PROJECT_NAME }} ${{ (github.ref == 'refs/heads/main' && '(Production)') || '(Preview)' }}

Comment Example

pull request comment example

Deleting Deployments

See the sub-action andykenward/github-actions-cloudflare-pages/delete about deleting deployments.

GitHub Deployment payload example response

{
  "payload": {
    "cloudflare": {
      "id": "123",
      "projectName": "cloudflare-pages-project-name",
      "accountId": "123"
    },
    "url": "https://example.com",
    "commentId": "1234"
  }
}

Debugging

Action Debugging

How to Access Step Debug Logs

This flag can be enabled by setting the secret ACTIONS_STEP_DEBUG to true.

All actions ran while this secret is enabled will show debug events in the Downloaded Logs and Web Logs.

How to Access Runner Diagnostic Logs

These log files are enabled by setting the secret ACTIONS_RUNNER_DEBUG to true.

All actions ran while this secret is enabled contain additional diagnostic log files in the runner-diagnostic-logs folder of the log archive.

Docs

ESM