Deploying Gatsby using Github Action & route 53

Deployed my personal blog using Route 53 and Github action .

Lets take this process into two step:

1. Github Action
2. Route 53

1️⃣ Github Action 🧨

This GitHub Action will run gatsby build at the root of your repository and deploy it to GitHub Pages for you!

Create .github folder in root of the project and under .github folder create workflows folder. Then add the below snippet into main.yml

.github/workflows/main.yml:

name: Gatsby Publish

on:
  push:
    branches:
      - master

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

Configure the access-token 🎗

1. Open github website with the repo (e.x: https://github.com/suprabhasupi/blog)

2. Click on Settings tab
   

3. Go to Secrets
   

4. Click on New Secret button
   

5. Enter the name and Value, Get the value by:

   1. Click on Profile settings
   2. Click on developer settings which is in left tab (include image)
   3. Click on Personal Access Token
   4. Click on Generate new token button
   5. Give Note name
   6. In Select scopes, checked repo
   7. Click Generate token button
   8. Now, Copy the value

6. Paste the value into New Secret Value

7. Now, Use the Secret name and place into the project

You can see the below image where I have used the same secret name into the main.yml file.

Once you push code into master, You can see the deployment status into Actions tab.

You can check the status as pass ✅ and fail ❌ in actions.

2️⃣ Configure AWS Route 53 🚀

1. Log into the AWS console and go to the Route 53 dashboard.

2. Click Hosted zones
   

3. Click the domain you would like to use or create new hosted zone

4. Click Create Record Set

5. Under the Type dropdown, select A — IPv4 addresses
   

6. Enter the following four IP addresses into the value text area. Then click Save Record Set.
   

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153
   

Yeah, this is it. Now you can check your live website on the URL which you have mentioned into route53 🜸.

Reference 🧐

• Gatsby Publish
• Gatsby Publishing on Youtube