Setup Cloudflare Pages Slack notifications

Setup Cloudflare Pages Slack notifications

Cloudflare Pages build/deployment notifications using Slack webhook via GitHub Action

·

3 min read

Table of contents

No heading

No headings in the article.

Hello there, Today I am going to show you the how-to setup Cloudflare Pages deployment Slack notifications using GitHub Action

Let's touch base...

What is Cloudflare Pages ?

Cloudflare Pages radically simplifies the process of developing and deploying sites by taking care of all the tedious parts of web development. (read more)

Concept

CF Pages as a concept is not new. For example, Github Pages is essentially exactly the same thing. There's additionally Netlify, CloudFront + S3, Vercel, and GitLab Pages. So you could ask yourself "What's the point of using one more platform?"

Let's list some reasons:

  • In one dashboard you will find everything DNS management, Workers (Serverless functions in CF), WAF, Security Center, Page rules, and many more great things for your website!
  • Quick integration with GitHub and GitLab repos, fast builds, and awesome CDN!
  • Free plan is lit! (Unlimited sites, bandwidth, requests !!! yeah, you heard it right!)

Problem

Assuming you already have set up CF Pages and just one thing of the puzzle is missing, Slack notifications!

Currently, there is no direct integration for Slack notifications on CF Pages like other services such as Netlify and also there are some community posts like this one asking for solution community.cloudflare.com/t/get-slack-webhoo..

Solution

Without further ado let's get our hands dirty !

There are plenty of blog posts on how to create CF Pages project so I will not include that in this post.

In order to achieve this I've published a Cloudflare Pages Slack Notification GitHub action

image.png

github.com/marketplace/actions/cloudflare-p..

Let's analyze it a bit how this action works:

Whenever there is a new push to GitHub it triggers GitHub action pipeline where it waits for deployment to finish by listening to Cloudflare API Read more

If the deployment fails it will show a Slack message like this:

image.png(failed build notification)

If deployment is successful shows message as: image.png(deployment successful)

It also adds deployments directly in GitHub image.png

Usage

Let's first add GitHub secrets:

Verify added secrets: image.png

Let's start creating GitHub action configuration yml.

Create a .github/workflows/action.yml file and add the following

name: Send Slack notifications
on: 
  push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Send Slack deployment notifications
      uses: arddluma/cloudflare-pages-slack-notification@v2.2
      with:
        accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
        apiKey: ${{ secrets.CF_API_KEY  }}
        accountId: ${{ secrets.CF_ACC_ID  }}
        project: ${{ secrets.CF_PROJECT  }}
        githubToken: ${{ secrets.GITHUB_TOKEN }}
        slackWebHook: ${{ secrets.SLACK_WEBHOOK  }}

After running the pipeline you should get notifications on Slack like this:

image.png

And..... Voila 🎉

That's it! You now have deployment notifications on Slack! Enjoy :)

Thanks for reading!