Deploying Gatsby using Github Action & route 53

Suprabha - Aug 17 '20 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

Configure the access-token ๐ŸŽ—

  1. Open github website with the repo (e.x: https://github.com/suprabhasupi/blog)
  2. Click on Settings tab
    Setting wrapper

  3. Go to Secrets
    Secrets wrapper

  4. Click on New Secret button
    New Secret wrapper

  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.
Check value name

Once you push code into master, You can see the deployment status into Actions tab.
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
    Hosted Zone Tab

  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
    IP address in aws Tab

  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 ๐Ÿง

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .