How to Setting up a github action CI/CD workflow on Github Pages for React App 👋 ⚛️

Today i have come up with topic of deploying the react application on GitHub Pages by using the concept of Github Actions to define CI CD in GitHub.

From your project folder, start by creating a new directory to hold the.yml file. This file will hold the configuration for our GitHub Actions. You have to create this file using this path.

Add this configuration code to deploy.yml file.

To explain this configuration simply, on each and every push to the master branch, GitHub Actions will perform these set of tasks.

If you look closely, you will notice that we are using a deploy_key variable. If you have already enabled ssh for your GitHub account, you can use that public/private key pair. Else you will need to create a new one.

You can create a public/private key like this.

Don’t forget to replace user.email with your e-mail address. After generating the keys, it's time to add them to our repository. Go to the settings tab of your repository. Select deploy keys from the sidebar.

You need to insert the public key you have generated into the text-area. Insert Public key of ACTIONS_DEPLOY_KEY for the title input field. Check Allow write access and click on the Add key button.

To view the public key, you can run

Next, up go to the secrets tab and add a new secret key. This is the private ssh key that you generated. You can view it like this. In the name field, add ACTIONS_DEPLOY_KEY. It's important.

That is it. We have integrated GitHub Actions into your workflow. To test it, make some changes in your components and push it to master. To see it live, go to the GitHub Actions tab in your project repository.

Thank you!