DEV Community

loading...

Publish Gatsby Blog to GitHub Pages with GitHub Actions

rizkyrajitha profile image Rajitha Gunathilake Updated on ・3 min read

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 * * *"

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

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 }}


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

Additional Resources / Info

Blog using this workflow

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

Discussion (0)

pic
Editor guide