#2

What is GatsbyJS?🤔

GatsbyJS is a static site generator based on ReactJS which helps developer build fast blazing websites.

Gatsby is great for building static public facing websites because it provides features like SEO, Image lazy-loading, prefetching resources, etc as part of its ecosystem.

Since build generated by Gatsby is just html, css, javascript, images, etc you can host with any provider.

Today we will learn how to host Gatsby build using Github.👨🏻‍💻

Github-Actions

Github-Actions is used to automate our workflows using bunch of jobs.

We will use gatsby-gh-pages-action by enriikke to automate deployment.

How it works?

After pushing source code to github, this action will run build command and push your build to a branch(master or gh-pages) which you have selected as deploy-branch for hosting.

For username.github.io

Checkout to a branch other than master e.g. dev. This branch will contain your source code. Next time when you will push this branch action will be triggered. Specify the branch name in yml file.

Create main.yml at root of your project in path /.github/workflows and paste this action.

name: Gatsby Publish

on:
  push:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2.1.1
        with:
          access-token: ${{ secrets.ganesh }}
          deploy-branch: master

For username.github.io/sub-domain

Specify the sub-domain name in gatsby-config.js for path prefixing.

module.exports = {
  pathPrefix: `/sub-domain`,
}

Set gh-pages to deploy-branch and —prefix-paths to gatsby-args.

name: Gatsby Publish

on:
  push:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
          gatsby-args: --prefix-paths

You can create secrets in repository settings and get secret value from application setting by generating token with repo scope.

Demo

You are amazing! ✨