📙 Static website hosting with GitHub & Actions
Tags: github, gatsby, hosting
Published: 2020-04-08 09:11:20

My website chandujs.dev is made with Gatsby. I made an article in dev.to recently. Read it [here](https://chandujs.dev/blog/i-made-my-website-with-gatsby-54jk).

{% link https://dev.to/ctrleffive/i-made-my-website-with-gatsby-54jk %}

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](https://help.github.com/en/actions/reference/events-that-trigger-workflows#external-events-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. 

```batch
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](https://github.com/settings/tokens/new)
You can use this token to trigger `repository_dispatch` events.
![New personal access token](https://dev-to-uploads.s3.amazonaws.com/i/yyq0nv5987k3x08jtynu.png)

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

```yml
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](https://chandujs.dev/blog/wildcard-subdomains-github-pages-38fh)

{% link https://dev.to/ctrleffive/wildcard-subdomains-github-pages-38fh %}