1  ---
  2  title: Using github actions for SSG deployment
  3  date: 2020-08-01
  4  description: Utilizing github action to automate boring stuff which is building and deploying SSG manually
  5  tags:
  6      - website
  7  ---
  8  
  9  # Introduction
 10  
 11  Previously, I use [Travis CI](https://travis-ci.org) to automatically deploy my site so if I push an update to my repo it will trigger a build and deploy it to github page. Turns out, github has a built in feature for CI/CD called **Github Actions**. In this post, I'll tell you how my experience using it.
 12  
 13  # Initial Setup
 14  
 15  ## Removing Travis CI
 16  
 17  Because my previous site is using [Travis CI](https://travis-ci.org), I need to delete the old `travis.yml`. If you haven't use any CI/CD before then just skip this step.
 18  
 19  ## Setting up Github Action
 20  
 21  To get started, you will need a file called whatever you want inside `.github/worksflows/` on your root project, I call it `main.yml`. You can also go to **Actions** tab on your repo and you'll find a bunch of preset that github gives you which you can then modify according to your wish.
 22  
 23  # Configuration
 24  
 25  ## File configuration
 26  
 27  The yaml file is pretty simple, here's mine and I'll explain it briefly each part.
 28  
 29  ```yaml
 30  name: Build and deploy
 31  
 32  on:
 33      push:
 34          branches: master
 35  
 36  jobs:
 37      build-and-deploy:
 38          runs-on: ubuntu-latest
 39          steps:
 40              - uses: actions/checkout@v2
 41  
 42              - name: setup node
 43                uses: actions/setup-node@v2-beta
 44                with:
 45                    node-version: "12.x"
 46  
 47              - name: install deps
 48                run: npm install --production
 49  
 50              - name: build site
 51                run: npm run build
 52  
 53              - name: deploy site
 54                uses: peaceiris/actions-gh-pages@v3
 55                with:
 56                    github_token: ${{ secrets.GITHUB_TOKEN }}
 57                    publish_dir: ./public
 58  ```
 59  
 60  -   **name**
 61  
 62      Fill this field with whatever you want, it is used as a name for your action that will show up on github.
 63  
 64  -   **on:[action]:[branch]**
 65  
 66      This field is to tell github what action will trigger the github action. For example, I use `push` which will trigger github action if I did a push on `master` branch.
 67  
 68  -   **jobs**
 69  
 70      This field will be filled with jobs or commands that github action will do based on previous field.
 71  
 72  -   **build**
 73  
 74      This is the job name, fill it with whatever you want. In my case, I fill it with `build-and-deploy`
 75  
 76  -   **runs-on**
 77  
 78      This field specify on which platform the action will run. I fill it with `ubuntu-latest`.
 79  
 80  -   **steps**
 81  
 82      The steps for your action will go here. There are few steps before deploying my site such as setting up node, installing dependencies, building the site, and then deploy it to github pages.
 83  
 84      -   **name**
 85          Fill this with the name of your step, `setup node` for example.
 86  
 87      -   **run**
 88          This is where you define a command to run
 89  
 90      -   **uses**
 91          If you use an external action, fill this in. It's available [here](https://github.com/marketplace?type=actions)
 92  
 93      -   **with**
 94          This is used to pass any additional data such as `node-version`, `GITHUB_TOKEN`, etc.
 95  
 96  Those are my brief explanation and how I understand each fields. If you want more details, please visit [this documentation](https://docs.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow).
 97  
 98  ## See it in action
 99  
100  We've set up the config file, time to see it in action. Push the config file to the remote repo and go to github action tab.
101  
102  ![action tab](/assets/posts/github-actions/1.png)
103  
104  If we click one of the action from the list, it will go to its own page which will look like this.
105  
106  ![action page](/assets/posts/github-actions/3.png)
107  
108  Our action name will show up here. Try to click on that.
109  
110  ![action name](/assets/posts/github-actions/4.png)
111  
112  It will show this. The log of our action's jobs.
113  
114  ![action jobs](/assets/posts/github-actions/5.png)
115  
116  # Conclusion
117  
118  The reason why I moved from Travis CI is not because Travis CI is bad or anything. It's just I want to try a new thing, plus it's available on the same site that my repo is hosted. I can just visit one site to check on my repo or my build status.
119  
120  Not gonna lie, I messed up the first time I did this lol. I messed up the config file (mainly because wrong indentation) and I messed up my repo branch because I had to move my `source` branch to `master` branch and I did it in an overcomplicated way.