Publish Gatsby Blog to GitHub Pages with GitHub Actions

rizkyrajitha

Rajitha Gunathilake

Posted on August 15, 2020

Publish Gatsby Blog to GitHub Pages with GitHub Actions

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

Additional Resources / Info

Blog using this workflow

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

💖 💪 🙅 🚩
rizkyrajitha
Rajitha Gunathilake

Posted on August 15, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related