gitHub-pages-deployment.md

🚀 GitHub Actions Deployment

Static website deployment with GitHub Actions

1. Generate Keys

Excecute below command in your PC to get all keys.

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

Two files named gh-pages (private key) and gh-pages.pub (public key) will be generated.

DON'T PUSH THOSE GENERATED KEY FILES IN ANY GIT REPOSITORY. You can delete them after you added the credentials to GitHub.

2. Add Deploy Key

You need to add a deploy key for deploying the branch content to web.

• Copy the contents of gh-pages.pub file.
• Goto Settings of your repository.
• Goto Deploy Keys settings.
• Give Title as ACTIONS_DEPLOY_KEY
• Paste key contents in Key field.
• Check Allow write access option.
• Click Add key.

3. Add Secret Key

And you need to add a secret key also.

• Copy the contents of gh-pages file.
• Goto Settings of your repository.
• Goto Secrets settings.
• Click Add new secret.
• Give Name as ACTIONS_DEPLOY_KEY
• Paste key contents in Value field.
• Click Add secret.

4. Workflow

Checkout the sample github-deploy.yml code. Copy the code into .github/workflows location in the root folder of your repository.

name: Github Deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'

      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install
      - run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./public

GitHub action will excecute yarn build followed by yarn install and publish the contents of /public folder into gh-pages branch in your repository whenever there is a new push event happens in master branch. After the first build, you can goto Settings page of your repository and select gh-pages from Source dropdown in GitHub Pages section.