📙 Static website hosting with GitHub & Actions

My website chandujs.dev is made with Gatsby. I made an article in dev.to recently. Read it here.

🌏 I made my website with Gatsby!

Chandu J S ・ Feb 21 '20

#gatsby #portfolio #javascript #webdev

I was using Netlify for hosting my website. Then I thought, why not use GitHub pages to host my website for free? Netlify is an awesome service, I know. But I have a problem keeping things in different places. GitHub has everything I want to host my website.

Reasons to Choose GitHub

• GitHub Pages for hosting.
• GitHub Actions for building & deploying.
• Since my website is in a public repo, Hosting with GitHub pages is free, running GitHub Actions won't count against the 2,000 minutes per month quota.
• Webhooks for triggering actions are available, repository_dispatch
• Keep everything together in one place 😉

Follow these simple steps to setup GitHub actions for your website.

1. Generate Keys

Execute 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 the web.

• Copy the contents of the 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.

3. Personal Access Token

If you already have a token with repo access, we can use that. Or create one with repo access from settings
You can use this token to trigger repository_dispatch events.

5. Workflow

Create a file github-deploy.yml with the following content in .github/workflows location in the root folder of your repository.

name: Github Deploy

on:
  repository_dispatch:
  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

According to the github-deploy.yml file, GitHub action will execute 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 or whenever a repository_dispatch event is fired. After the first build, you can goto Settings page of your repository and select gh-pages from Source dropdown in GitHub Pages section.

Don't forget to link your domain with GitHub pages. For that add a CNAME file with your domain name in the /static folder of your gatsby project.

You can read more about how I link my domain & subdomains with GitHub here

🔥 Wildcard Subdomains & GitHub Pages

Chandu J S ・ Apr 5 '20

#github #webdev #dns