Github actions allows us to add CI/CD to our projects, for free ! You can build, test and deploy your code on Github thanks to a simple yaml file.

What is YAML ?

If you find yourself asking this question don't worry, I have an article for you ! Go check out How to write a YAML file !

Get started

On your code editor

Create a new folder in your project called ".github", inside add a folder called workflows and again add a main.yml or main.yaml file like follows :

- .github
	 - workflows
		 - main.yaml
- node_modules
 - public
 - src
 - package.json
 - package-lock.json
 - README.md

On github

You can also add a new workflow on github. In you repository go to the "Actions" tab. Github suggests you some workflows they created or created by big companies. In our case we will click on "set up a workflow yourself".

What composes a Github Action

The first thing you have to write is the name of the Action, for exemple "My First Github Action".

name: My First Github Action

You have to specify when you want the action to be triggered. It can be any type of event like push, commit, pull and much more.

name: My First Github Action
on:
  push:

And you can write which branch you want to use :

name: My First Github Action
on:
   push:
	branches:
	 - master

Then you add "jobs" and the name of this job, for instance "build" or "deploy", but you can write whatever you want.

name: My First Github Action
on:
   push:
	branches:
	 - master
jobs:
	deploy:

Each Github action is in fact a virtual environment, or "runner", set up for each workflow you create, so you have to specify which environment to use :

Here we will use the ubuntu-latest like so :

name: My First Github Action
on:
   push:
	branches:
	 - master
jobs:
	deploy:
	runs-on: ubuntu-latest

That's where the fun begins. The next step is to add... steps ! We will write different actions to be done.

The first step is to checkout the branch. First, give a name to this step and then, you can write the commands manually or as I said, use an action already created by Github.

Here I will use the action action/checkout.

name: My First Github Action
on:
   push:
	branches:
	 - master
jobs:
	deploy:
		runs-on: ubuntu-latest
		steps:
		      - name: Check out repository code
		      - uses: actions/checkout@25a956c84d5dd820d28caab9f86b8d183aeeff3d

❗ What I did here is that I referred to a specific commit of the action. You could write checkout@master but the branch will be updated and your action could end up not working. I strongly advise you to refer to a commit.

When you want to run commands, use the keyword "run". Here the Action will display the sentence "This job is now running".

name: My First Github Action
on:
   push:
	branches:
	 - master
jobs:
	deploy:
		runs-on: ubuntu-latest
		steps:
	      - name: Check out repository code
	      - uses: actions/checkout@25a956c84d5dd820d28caab9f86b8d183aeeff3d
	      - run : echo "This job is now running"

You can add variables to you action and display several information :

• Contexts: Information about jobs, steps, runners ...
• Environment variables available to every steps in the workflow run.

Example : If you wanted to display which OS is used you would call runner.os and to display the user that created the workflow you would use GITHUB_ACTOR:

name: My First Github Action
on:
   push:
	branches:
	 - master
jobs:
	deploy:
		runs-on: ubuntu-latest
		steps:
	      - name: Check out repository code
	      - uses: actions/checkout@25a956c84d5dd820d28caab9f86b8d183aeeff3d
	      - run : echo "This job is now running on ${{ runner.os }}"
	      - run : echo "This workflow was created by ${{ GITHUB_ACTOR }}"

Github Secrets

It is not very secure to add API keys, passwords or token directly into the yaml file. That is where Secrets come in handy, as they will encrypt those information.

Go to the Settings tab, and click on Secrets and click on "New repository secret".

Enter the name you want to give to that secret and its value.

You will be able to use these secrets inside your workflow like environment variables or contexts :

name: Build App
    run: yarn build
    env:
        MY_SECRET: ${{secrets.MY_SECRET}}

Here you have the basics of Github Actions, but there are lots of life things to learn ! Go check out the Documentation to know more about Github Actions.