Auto deploy project with Github Actions

For us developers, working with Github is a daily task, often having to work with it. Most of us only care about Github’s main functions such as Pull Requests, Issues, or code but we rarely pay attention to other Github functions. In today’s article, I introduce to you the Github Actions and use it to deploy projects to Github Pages. So what is Github Actions? How to use it? Let’s find out together

What is Github Actions?

• Github Actions allows us to create software development lifecycle workflows for projects directly on our Github repository.
• Github Actions helps us automate the software development process where we store code and combine pull requests and issues. We can write individual tasks, called actions, and combine those actions together to create a workflow at our disposal. Workflow are automated processes that you can set up in your repository to build, test, publish packages, release, or deploy projects on Github.
• With Github Actions we can integrate continuous integration (CI) and continuous deployment (CD) directly on our repository.

Use Github Actions deploy the project to Github Pages

In this article, use Github Actions to create a workflow to deploy a static website to Github Pages whenever the master branch changes the code.
Workflow of the project will be saved in the folder .github/workflows/
We create a .yml file in the workflow folder (for example: github-pages.yml) or go to the repository on github go to the Actions tab and click on Set up workflow yourself , with the following file content:

In this article I deployed the ReactJs project to github pages, we modified the github-pages.yml file as follows:

A workflow is made up of one or more job . Jobs run in parallel by default. To run job sequentially, you can define dependencies on other jobs by jobs.<job_id>.needs keyword. Each job runs in a new version of the virtual environment specified by runs-on .
Here we use ubuntu-latest
In the steps :

This part I leave the script to compile code before deploying, if for projects that do not need compile code, you can skip this part.

All of these options are environment variables that will be used to deploy onto the active github pages.

• ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} : is an access token used to authorize actions to work with your repository . We in Profile Settings / Developer settings to create a Personal Access tokens, then go to Settings and select Secrets and add new named ACCESS_TOKEN .
• BASE_BRANCH: is the branch we use to deploy the project, here I choose is the master branch
• BRANCH: is the branch we want to deploy to, here is gh-pages . And we don’t have to create the gh-pages branch first, because this action gives us that branch if that branch doesn’t already exist.
• FOLDER: is the directory that we use to deploy. Here is the build because I’m deploying ReactJs application to deploy, when the compile code will create a build directory containing the code after the project’s compile.

Custom domain name

If you are using a custom domain name , you will need to prepend a CNAME file at the root of the gh-pages branch with your domain name in it.
With the ReactJs application we can ReactJs custom domain name by going to the package.json file and adding the following line:

After completing the above steps we can push the changes in our code to the repository and see the activities in the tab Actions

Conclude

In this article, I have introduced you to Github Actions and used it to automatically deploy a ReactJs project to gihub pages . Thank you for following up on my article.