# How to get started with GitHub Actions

You are probably familiar with Github. A platform to build software, collaborate with folks and contribute to open-source projects.

GitHub provides many functionalities that make your life easier as a developer.

In this blog, we are going to learn about **[GitHub Actions](https://docs.github.com/en/actions)** by using a simple example. This blog will help you to understand and get the basic idea of **GitHub Actions.** So, without wasting a bit. Let's start.

# What are GitHub Actions?

In simple words, **[GitHub Actions](https://docs.github.com/en/actions)** help us to do things automatically when any event occurs.

### Definition

GitHub Actions is a platform for automating software development, testing, and deployment. It allows us to run arbitrary code on our repository when a specific event happens.

> So, with the help of **GitHub Actions,** you can write some code that will run whenever a particular event occurs. **Events** can be a PR, any issue, any push commit, and so on.

- GitHub Actions contains several components that help us to understand GitHub Actions more simply. 

### GitHub Actions Components

**1️⃣ Event**

An event is anything that can happen on a GitHub repository. It goes from pushing a code, creating a branch, opening a pull request, and even commenting on an issue.
The list of triggers is much longer: you can check it out [here](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#webhook-events). 

**2️⃣  Workflows**

A workflow is a configurable automated process that runs one or more jobs.

Workflows are defined in YAML files and kept in the repository root directory in the .github/workflows directory. A repository can also have multiple workflows.

**3️⃣ Jobs**

A job is a collection of tasks executed in a workflow when triggered by an event. Each step is either a script or a Github action. A workflow can have multiple jobs that run in parallel.

**4️⃣ Runners**

Runners are processed on a server and run the workflow when triggered. Each runner is responsible for executing a given job.
Runners are hosted in the cloud but can also be self-hosted in custom cloud environments.

**5️⃣ Actions**

Actions are individual tasks: they are called inside a job. Actions used to perform complex tasks that you may call multiple times and import into your workflows. 
You can build your actions or reuse some open-source actions from the GitHub marketplace and add them to your workflow directly when they meet your needs.

In this image, you can see the working of GitHub actions. You'll understand more once you see it with an example.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667889638363/kmwpZ4fBK.png align="left")


# GitHub Actions Example

Now we will see a quick example of GitHub actions. This example will be short but will help you in grasping GitHub actions.

Go to your GitHub and create a new repository. Click on this **`new`** button to create a new repo.


![1667790098061.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667890555972/8yd0NASm7.png align="left")


Enter the name of your repository. I named **github-actions-example.**👇

![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933036355/8LOiJKX6r.png align="left")

Now choose the visibility 👆 of your repo. I will pick private because it's just an example. You can pick as per your choice.



Click on the `button`👇. Your repo is created. 


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933208166/w8-R58fb4.png align="left")


 > **Note -** I'm doing everything in the same place (in the browser) to help you understand it better. You can follow the same process with any code editor if you want.


Click on **`create a new file.`** 👇


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933392305/OUFeZbeWN.png align="left")


Enter your file name. I am using a **`JS`** file. You can make it as per your choice.


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933507767/BBooBDbog.png align="left")


Start writing content in this file. I am writing this, 👇 you can write any program.


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933593273/4AepJyhvo.png align="left")

Now scroll down a bit and click on the **` the commit button.`** You can also write your commit message here.


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933806087/LfXUo83JC.png align="left")


File created. 👇


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667933904877/sGXxUkorN.png align="left")

**Adding GH Actions**

Now we will add the github actions to our repo.

> **Note**- Github Actions should be in a specific folder. 

Click on the **` Add File` ** button and create a new file.

![Screenshot (275).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667934090126/cQIN6JeQh.png align="left")

Please enter the folder name(be sure to use the same name). I named **` .github `** (press the forward slash to enter into this folder) and create a new folder ** ` workflows. `** Into this folder, enter the name of your file(you can write any name here). This file should be a ***yaml***. I named it **` build.yml `** 👇


![Blue Red and Yellow typhography Welcome To Graphic Design Facebook Cover (1600 × 840 px) (1600 × 840 px) (1600 × 840 px) (10).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667934236252/qDVUMzfez.png align="left")

In this file, we will be writing out github actions.



So, we will start with the name. This is the name of your github action.

```
name: build
```

Now we will add **trigger**. The triggers can be a push, a pull, etc.

```
name: Build
on: [push]

```

Here we are using push. As a result, whenever someone pushes code to this repo, the github action is triggered.

![Screenshot (280).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667917449783/x1aYZqK7w.png align="left")


The next part is to define **Jobs**(we have learned about jobs above). 

```
name: Build
on: [push]

jobs: 
  build:    //this is the name of the job. You can give any name
    runs-on: windows-latest  // enter your machine name. If you're using Ubuntu, write ubuntu-latest. I am using windows.
```

In this job, we will have steps, and you can define multiple steps inside this job. Each step is either a script or a Github action.

- So, the first thing we want to do is check out the code so we can use it in a built-in GitHub action where we say,  check out, and we're going to use version three(you can also use v2). 👇


![Screenshot (281).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667919180195/TaF-ZtyBm.png align="left")

Next, we'll determine whether the code being pushed contains the node environment or not. So, for this, we will set up a node like this 👇

```
...

jobs: 
  build: 
    runs-on: windows-latest
    steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
```


![Screenshot (282).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667919483866/V6jZad892.png align="left")


> There are many versions of node, and everyone uses different versions. So, how will we specify which node version will correct for this repo? So, for this, we can use **Variables** inside steps. 

To use **variables,** you can write like this 👇

```
...

steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: 
         node-version: '16'
```
Here 👆 you can see that I used **`node version: 16`.** It means that whenever someone pushes a code to this repo, it should contain a node with version 16. If the code does not include version 16, The run fails, or if it is, the job succeeds.

> You can choose any version 16, 15, 14, etc.

Your code should now look like this.👇


![Screenshot (284).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667931030094/RCLzJt8oW.png align="left")

The next step is to execute the command to execute the code in our `index.js` file. The run command can be an `npm ci` or `npm install` step, but in this case, we'll use 'node' to call our ` 'index.js' ` file.
The next step is to execute the command that will execute our code. 👇

```
...

steps: 
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: 
         node-version: '16'
      - run: node index.js

```
Here 👆 you can see that I use the `run` then, with the help of the `node` command, I'll call our `index.js` file.

Now our whole code will look like this. 👇


![Screenshot (283).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667931298972/82BeIw0vr.png align="left")

And that's it. You can see that you may repeat the processes within the job or have another job. So, once this job is complete, run the following one.

- For now, we will commit this file. You can enter your commit message and click on the commit button.👇


![Screenshot (285).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667931513497/1jJ-ehYA2.png align="left")

After you've committed your file, go to the '**` code `**' tab and look for the *** ` orange circle ` ***. It means your github actions are working. 👇


![Screenshot (286).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667931725199/nJO8k6qsC.png align="left")

Whenever you or someone pushes any code, the github action will run.

You can also check this by clicking on this **` Action `** tab. Here you can see your success and failure runs of actions. By clicking on this successful one,👇


![Screenshot (287).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667931943451/7j7umbgTL.png align="left")

and then, this 👇 build file,


![Screenshot (288).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667932054311/S_4nl0vl0.png align="left")

You can see all your different steps.👇 


![Screenshot (289).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667932113085/P0LmAZvCn.png align="left")

You can also explore them by clicking on each stage. If you click on this ` 'run node,' ` you can view the contents of our ` 'index.js' ` file.👇


![Screenshot (291).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667932281923/_ummfdYnh.png align="left")

# Wrapping Up

That's all for now; hopefully, you now understand the fundamentals of Github Actions. I hope this article clarifies things.

If you learn something from it, share it with your friends and like this blog.

**[Reference](https://youtu.be/-ZiuJdT1i0k)**

## You can join my learnings 

- [GitHub](https://github.com/Shivam-Katare)

- [Twitter](https://twitter.com/Shivamkatare_27)

- [LinkedIn](https://www.linkedin.com/in/shivam-katare-aa80b218b/)

- [ShowwCase](https://www.showwcase.com/shivam-katare)