Deploying Gatsby using Github Action & route 53
Tags: beginners, gatsby, github, webdev
Published: 2020-08-17 06:48:47

Deployed my <a href='http://blog.suprabha.me'>personal blog</a> 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:`

```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: <a href='https://github.com/suprabhasupi/blog'>https://github.com/suprabhasupi/blog</a>)
2. Click on Settings tab
    <img src='https://i.imgur.com/0jtX5XZ.png' alt='Setting wrapper' width="90%" />

3. Go to Secrets
    <img src='https://i.imgur.com/YkBdygL.png' alt='Secrets wrapper' width="90%" />

4. Click on New Secret button
    <img src='https://i.imgur.com/xXlKWWg.png' alt='New Secret wrapper' width="90%" />

5. Enter the name and Value, Get the value by:
    1. Click on <a href='https://github.com/settings/profile'>Profile settings</a>
    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.
<img src='https://i.imgur.com/QOBZnR5.png' alt='Check value name' width="90%" />

Once you push code into master, You can see the deployment status into `Actions` tab.
<img src='https://i.imgur.com/i6dqY1i.png' alt='Actions Tab'  width="90%" />

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 <a href='https://console.aws.amazon.com/route53/home'>Route 53 dashboard</a>.
2. Click **Hosted zones**
<img src='https://i.imgur.com/WpstUJ5.png' alt='Hosted Zone Tab' />

1. Click the domain you would like to use or create new hosted zone
2. Click **Create Record Set**
3. Under the **Type** dropdown, select **A — IPv4 addresses**
    <img src='https://i.imgur.com/FbmmwQO.png' alt='IP address in aws Tab'  width="90%" />

4. 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 🧐

- <a href='https://github.com/marketplace/actions/gatsby-publish'>Gatsby Publish</a>
- <a href='https://www.youtube.com/watch?v=JIMord7-G10'>Gatsby Publishing on Youtube</a>