CloudFlare Pages Notification

Using CF Pages Await made by Daniel Walsh WalshyDev

Wait for Cloudflare Pages build to finish and send notification via various webhooks, including Slack, Feishu, and custom webhooks with support for custom method, headers, and body.

Recommended: Generate API Token go to https://dash.cloudflare.com/profile/api-tokens Create Custom Token

Thanks for previous work by arddluma.

Usage

Slack Notification Example

- name: Await CF Pages and send Slack notification
  uses: dfface/cloudflare-pages-notification@v1
  with:
    # Uncomment these two lines if you wish to use the Global API Key (Not recommended!)
    # accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
    # apiKey: ${{ secrets.CF_API_KEY  }
    # Use an API token (Recommended!)
    apiToken: ${{ secrets.CF_API_TOKEN }}
    accountId: ${{ secrets.CF_ACC_ID  }}
    # CloudFlare Pages project name
    project: ${{ secrets.CF_PAGES_PROJECT  }}
    # Add this if you want GitHub Deployments (see below)
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    # Notification type
    notificationType: slack
    # Create Slack Incoming webhook and add as variable https://hooks.slack.com/...
    webhookUrl: ${{ secrets.SLACK_WEBHOOK  }}
    # Optional: Custom Slack message content
    slackMessage: ":white_check_mark: Deployment for *{{project}}* has {{success ? 'succeeded' : 'failed'}}!\nEnvironment: *{{environment}}*\nDeployment URL: {{deploymentUrl}}\nCommit: {{commitUrl}}"
    # Optional: Add this to review a specified commit
    commitHash: ${{ steps.push-changes.outputs.commit-hash }}

Feishu Notification Example

- name: Await CF Pages and send Feishu notification
  uses: dfface/cloudflare-pages-notification@v1
  with:
    # Use an API token (Recommended!)
    apiToken: ${{ secrets.CF_API_TOKEN }}
    accountId: ${{ secrets.CF_ACC_ID  }}
    project: ${{ secrets.CF_PAGES_PROJECT  }}
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    # Notification type
    notificationType: feishu
    # Create Feishu Incoming webhook and add as variable https://open.feishu.cn/open-apis/bot/v2/hook/...
    webhookUrl: ${{ secrets.FEISHU_WEBHOOK  }}
    # Optional: Custom Feishu message content
    feishuMessage: "🚀 CloudFlare Pages 通知：{{project}} 的部署{{success ? '成功' : '失败'}}！\n环境: {{environment}}\n部署URL: {{deploymentUrl}}\n提交: {{commitUrl}}"
    # Optional: Add this to review a specified commit
    commitHash: ${{ steps.push-changes.outputs.commit-hash }}

Custom WebHook Example

- name: Await CF Pages and send custom webhook notification
  uses: dfface/cloudflare-pages-notification@v1
  with:
    # Use an API token (Recommended!)
    apiToken: ${{ secrets.CF_API_TOKEN }}
    accountId: ${{ secrets.CF_ACC_ID  }}
    project: ${{ secrets.CF_PAGES_PROJECT  }}
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    # Notification type
    notificationType: custom
    # Custom webhook URL
    webhookUrl: ${{ secrets.CUSTOM_WEBHOOK_URL  }}
    # Custom webhook method (default: POST)
    webhookMethod: POST
    # Custom webhook headers in JSON format
    webhookHeaders: '{"Content-Type": "application/json", "Authorization": "Bearer ${{ secrets.WEBHOOK_TOKEN }}"}'
    # Custom webhook body with variables
    webhookBody: '{"project": "{{project}}", "environment": "{{environment}}", "success": {{success}}, "deploymentUrl": "{{deploymentUrl}}", "logs": "{{logs}}"}'
    # Optional: Add this to review a specified commit
    commitHash: ${{ steps.push-changes.outputs.commit-hash }}

Example Workflow

name: Deploy
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Await CF Pages and send notification
      id: cf-pages
      uses: dfface/cloudflare-pages-notification@v1
      with:
        # Use an API token (Recommended!)
        apiToken: ${{ secrets.CF_API_TOKEN }}
        accountId: ${{ secrets.CF_ACC_ID  }}
        project: ${{ secrets.CF_PAGES_PROJECT  }}
        # Notification configuration
        notificationType: feishu
        webhookUrl: ${{ secrets.FEISHU_WEBHOOK  }}

Screenshots

If build phase fails:

If deployment phase is successful:

Outputs

• id - Deployment ID, example: 50ff553c-da5d-4846-8188-25ae82a3bb7d
• environment - Envrionment for this deployment, either production or preview
• url - URL for this deployment
• alias - Alias URL (Will be the branch URL such as fix-issue.project.pages.dev or be the deployment URL)
• success - If the deployment was successful

Custom WebHook Variables

When using notificationType: custom, you can use the following variables in your webhook body:

• {{project}} - Cloudflare Pages project name
• {{environment}} - Deployment environment (production or preview)
• {{commitUrl}} - URL to the commit that triggered the deployment
• {{actor}} - GitHub actor who triggered the deployment
• {{deploymentId}} - Deployment ID
• {{aliasUrl}} - Alias URL for the deployment
• {{deploymentUrl}} - Deployment URL
• {{logs}} - Deployment logs (only available for failed deployments)
• {{success}} - Boolean indicating if the deployment was successful
• {{stageName}} - Name of the latest stage
• {{stageStatus}} - Status of the latest stage

GitHub Deployments

GitHub Deployments will show if the deployment was successful or failed right inside GitHub! You can easily see the status, view the website (exact deployment) and see the logs.

Note: You need to add the githubToken input in order for deployments to work!

Overview

Pull Requests

In Progress

Successful