DEV Community

Rajitha Gunathilake
Rajitha Gunathilake

Posted on • Edited on

Publish Gatsby Blog to GitHub Pages with GitHub Actions

#actionshackathon #opensource #github #telegram

This workflow will build and publish a Gatsby blog to the GitHub Pages and notify status via Telegram.

My Workflow

This workflow will build the code on dev branch and then copy build files to the master branch. Then it will commit those files and push them to publish the Blog on GitHub Pages.

This workflow will trigger on 2 events

  1. on push to dev branch
  2. cron job runs daily at 0800h 

on:
  push:
    branches: [dev]
  schedule:
    - cron: "0 8 * * *"
Enter fullscreen mode Exit fullscreen mode

cron job is used because my blog use nasa image of the day as it's background image and it is updating daily .This is not mandatory and can be omitted based on requirement .

After that, workflow will delete everything in the master branch and then checkout to dev branch and start building . After building it will copy the build files(on public folder) to master branch and push those changes to publish to GitHub Pages.


   steps:
      - name: checkout master  branch # checkout master  branch
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: remove all files # remove files.
        run: |
          rm -rf *
      - name: create CNAME file # remove files.
        run: |
          echo "rizkyrajitha.me" > CNAME
      - name: checkout dev  branch #checkout dev  branch into temp folder.
        uses: actions/checkout@v2
        with:
          ref: dev
          path: temp
          persist-credentials: false

      - name: run yarn install and build # go to temp folder and run npm build to create files.
        run: |
          cd temp
          yarn install
          yarn build
      - name: move files # move the public built files into root dir and remove others.
        if: ${{ success() }}
        run: |
          mv temp/public/* ./
          rm -rf temp
      - name: Commit files for change # commit
        if: ${{ success() }}
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add .
          git commit -m "Add changes"
      - name: Push changes #push files into master branch
        if: ${{ success() }}
        uses: ad-m/github-push-action@master
        with:
          BRANCH: master
          github_token: ${{ secrets.GITHUB_TOKEN }}
          force: true
Enter fullscreen mode Exit fullscreen mode

After building and publishing blog a telegram message is send to a specified chat to notify the workflow status(success , Cancelled or failure) . TELEGRAM_BOT_ID , TELEGRAM_CHAT_ID is required . other fields can be omitted on your preference


      - name: Notify via TELEGRAM BOT
        uses: RizkyRajitha/github_actions_notify_telegram@v1
        with:
          TELEGRAM_BOT_ID: ${{ secrets.TELEGRAM_BOT_ID }}
          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
          CUSTOMMESSAGESUCCESS: "Published \xF0\x9F\x9A\x80 Blog via GitHub Actions"
          CUSTOMMESSAGESFAILURE: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Failed"
          CUSTOMMESSAGESCANCELLED: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Cancelled"
          JOBSTATUS: ${{ job.status }}
          GITHUB_RUN_NUMBER: ${{ github.run_number }}
          GITHUB_REPOSITORY: ${{ github.repository }}
          GITHUB_RUN_ID: ${{ github.run_id }}
          GITHUB_ACTOR: ${{ github.actor }}
          GITHUB_EVENT_NAME: ${{ github.event_name }}
          GITHUB_SHA: ${{ github.sha }}
Enter fullscreen mode Exit fullscreen mode

Actions used

  1. actions/checkout@v2 : for checking out branches

  2. ad-m/github-push-action@master : push build files to master branch , published via GitHub Pages

  3. RizkyRajitha/github_actions_notify_telegram@v1 : send telegram notifications

Submission Category:

DIY Deployments

Yaml File or Link to Code

main.yml file

Telegram Notify action Repo

GitHub logo RizkyRajitha / github_actions_notify_telegram

Telegram Notification for Github action

Telegram Notification for Github action

Telegram icon

Guide to create a bot and adding to telegram chat

telegram chat message example

add TELEGRAM_BOT_ID and TELEGRAM_CHAT_ID to the secrets in github repo

Example


name: Telegram Notification


on:
  push:
    branches: [master]

jobs:
  Publish:
    runs-on: [ubuntu-latest]

    steps:
      - name: checkout master  branch # checkout master  branch
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: run yarn install and build # go to temp folder and run npm build to create files.
        run: |
          cd temp
          yarn install
          yarn build

      - name: Notify via TELEGRAM BOT
        uses: RizkyRajitha/github_actions_notify_telegram@v1
        with:
          TELEGRAM_BOT_ID: ${{ secrets.TELEGRAM_BOT_ID }}
          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
          CUSTOMMESSAGESUCCESS: "Published \xF0\x9F\x9A\x80 Blog via GitHub Actions"
          CUSTOMMESSAGESFAILURE: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Failed"
          CUSTOMMESSAGESCANCELLED: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Cancelled"
          JOBSTATUS: ${{ job.status }}
          GITHUB_RUN_NUMBER: ${{ github.run_number }}
          GITHUB_REPOSITORY: ${{ github.repository }}
          GITHUB_RUN_ID: ${{ github.run_id }}
          GITHUB_ACTOR: ${{ github.actor }}
          GITHUB_EVENT_NAME: ${{ github.event_name }}
          GITHUB_SHA: ${{ github.sha }}

Create a JavaScript

…
View on GitHub

Additional Resources / Info

Blog using this workflow

GitHub logo RizkyRajitha / RizkyRajitha.github.io

Reference https://github.community/t/user-github-pages-site-auto-deploy-from-another-branch-on-push/17912

Top comments (0)