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
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
Top comments (0)