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
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.