In a nutshell, GitHub Actions is GitHub’s automated workflow solution. It allows developers to run custom build and deployment actions straight in GitHub. So it makes sense if you already have your code on GitHub. Even free accounts have 500MB storage and 2,000 worker minutes allowance. So all you need is a free account to follow along.


GitHub Actions is quite a flexible event-driven mechanism. In addition, to be able to run jobs on events, you can run on schedule as well.

The units executed by GitHub Actions are called workflows. To create a workflow, you can create a file under the .github/workflows directory inside your GitHub repository.

By default, the .github directory is likely to be excluded in the left pane. You can update VS Code settings to remove it from the exclusions list by following this guide: How to show hidden directories in Visual Studio Code

You can view the process mainly as an IFTTT (if this, then that) workflow. If some event happens, a list of actions (jobs) runs. For example, let’s take a look at this very basic workflow:

name: Demo

    branches: [ main ]

    runs-on: ubuntu-latest
      - name: Run a one-line script
        run: echo Hello, GitHub Actions!

So the process we are defining is

When some code is pushed

To the main branch

Create a new virtual machine based on ubuntu-latest template (Currently it’s Ubuntu 20.04)

Execute the following command: echo Hello, GitHub Actions!

And to test the workflow, you can create and push a new file:

touch demo-trigger
git add demo-trigger
git commit -m "testing demo workflow"
git push

At this point, if you go to your repository’s Actions tab, you should see something like:

GitHub repository actions tab showing a workflow in progress

And after waiting a few seconds, you should see the job complete. Click on the name and expand the details to see the logs:

Actions tab showing the successful result of a completed action

It prints the statement we put in the workflow YAML file.

Let’s Do Something Useful With It!

Printing something is helpful, but most of the time, you would run some build process and deploy the artefacts somewhere. So let’s move one step further and try something meaningful.

In this walkthrough, we will create a CI/CD pipeline that builds a React application and deploys it to another branch called _site. Finally, GitHub Pages will serve the output as a static website.

Without further ado, let’s start the walkthrough:

  1. Create a new branch called _site:
Branches dialog showing _site branch
  1. Go to repo Settings -> Pages. Select _site as the Source branch and click Save
GitHub Pages page showing the branch dialog opened
  1. Confirm that your site is ready to be served on GitHub Pages. You should see a notification that looks like this:
GitHub Pages notification saying the site is ready to be published

and if you visit the link, it should look like this:

Webpage showing the contents of file published from the repository
  1. Clone the repo and check out the main branch
  2. Change to the repo path in the terminal and create a new React app
npx create-react-app .
  1. After completing the installation, you can test your application by running it.
npm start

The output should look something like this:

Terminal output showing React app is compiled successfully

We are going to use the app as-is with one exception. Open package.json and add the following file:

"homepage": "/github-actions-workout/",

so that it looks like this:

IDE showing homepage property in packages.json file

Editing the JSON file is necessary for the paths in the built application. Because our application is not in the root level of the subdomain, we have to tell React the relative path to adjust the URLs.

  1. Create a new file called publish-site.yml under the ./github/workflows directory.
  2. Enter the code below as the contents of the publish-site.yml file:
name: Generate a build and push to another branch

      - main

    runs-on: ubuntu-latest
    name: Build and push to _site
      - name: git-checkout
        uses: actions/checkout@v2
      - name: Install all dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Push
        uses: s0/git-publish-subdir-action@develop
          REPO: self
          BRANCH: _site
          FOLDER: build
          GITHUB_TOKEN: {% raw %} ${{ secrets.GITHUB_TOKEN }} {% endraw %}
  1. Commit and push your changes in the main branch
git add .
git add ./.github/workflows/publish-site.yml
git commit -m "testing react CI/CD"
git push
  1. Go to the Actions tab, and you should see the workflow we just pushed:
Actions tab showing testing react CI/CD action in progress
  1. And after some brief queuing and waiting, you should get the output:
Actions tab showing the successful output of testing react CI/CD workflow
  1. Also, notice that GitHub’s Pages also feature another action. You can see it in action in the same actions list. Just check “pages build and deployment” jobs after you push code
Actions tab showing Github Pages's build process
  1. After successful GitHub Pages build, if you revisit your page, you should see a new React app running
Screen showing successful deployment of the React app


In this post, we covered the basics of GitHub Actions and created a CI/CD pipeline for a React application only by using GitHub. I hope this post has been helpful to you. If you want to move coverage on GitHub actions, please leave a comment below.


Volkan Paksoy

Volkan Paksoy is a software developer with more than 15 years of experience, focusing mostly on C# and AWS. He’s a home lab and self-hosting fan who loves to spend his personal time developing hobby projects with Raspberry Pi, Arduino, LEGO and everything in-between.