Publish on Github Pages

Introduction

We will be talking about how to set up website using GitHub Action and GitHub pages. This is really easy way to set up website free.

PreReq

I will be assuming that you have a GitHub account and have small webapp running locally , we will be covering on how to start working on webapp in later tutorial. We are here using gatsbyJS based webapp to be published on Github Pages.

Github Actions

GitHub Actions makes it easy to automate all your software workflows, and support CI/CD pipeline thus allowing us to build our private repo on code changes and deploy them automatically. Assuming we have a node js project , we can start by creating a directory .github and subdirectory workflow. This is where we will be storing YAML files. here we are working with single workflow, but it can be multiple workflows depending on use case. Your directory structure may looklike below:

my-app/
    |- .github
      |- workflow
         |- nodejs.yaml
    |- package.json
    |- lib
      |- code.js
    |- index.js

We can use following YAML as templete:

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

jobs:
  build:
    #  Underline system to use
    runs-on: ubuntu-latest
    #  If we want to support multiple underline node versions
    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install

This tells it to install the environment and sets up the packages. Now We are using gatsbyJS to deploy on GGithub pages but there is alternative suggested below to use which allows to us to deploy on GitHub pages.

Deploy on GitHub Pages using gatsby-cli

First we need to install a package called : gh-page , it makes our job way easier as it builds webapp and then also deploy on github for you. Create a run script fordeploy

{
  "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }
}

Add script to deploy to GitHub Pages via CI

Update the Gatsby project’s package.json to also include a deployment run script which invokes gh-pages with two important command-line arguments:

1. -d public - specifies the directory in which the built files exist and will be pushed as a source to GitHub Pages
2. -r URL - the GitHub repository URL, including the use of the secret GitHub token (as a secret environment variable) to be able to push changes to the gh-pages branch, in the form of https://$GH_TOKEN@github.com/<github username>/<github repository name>.git Here’s an example

"scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public -r https://$GH_TOKEN@github.com/lirantal/dockly.git"
  }

Update github actions file to automate.

add following step after npm install step. Also note the if condition which make sure to deploy only on the branch if its master.

    - run: npm run deploy
      if: github.ref == 'refs/heads/master'
      env:
        GH_TOKEN: <YOUR_TOKEN>

How to generate token.

Follow instruction here : https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line You will need following permission:

• repo

Let me know how it turns out to be.