Instructions to deploy a static page using ReactJS on GiHhub page

What is a github page?

GitHub Pages is a service created by GitHub that allows publishing websites or web applications by hosting it in the free GitHub repository. You can host a complete website and unlimited project pages, which can be considered a “page” on the website. The website code is stored in the specified GitHub repository, then GitHub will be published for viewing on any computer or tablet. For static websites or small web applications, there are some free hosting plans that you can start up and run online right away. Usually they require less setup than a paid server.

GitHub Pages is one of such free solutions, in this article I will mention deploying a static page using Reactjs on github page.

User manual:

In order to use the github page, you must have a github account.

Once you have a github account, we proceed to create a repo to store the source code After creating the repo, we proceed to clone to the local machine, so it’s done preparing

Now to the code, to create a reactjs project we use the command

After you have finished running, use the following command to check if the project is working

Next we install the gh-pages package to complie the code and serve for deploying

Then we go to package.json config file as follows

Here we add a property as homepage: http://iamPhong.github.io/mycv with the url formatted like this: http://{username}.github.io/{repo-name} , username is The user is entering github, repo-name is the name of the repo just created, my here is mycv . The next parameter to watch out for is:

This is the configuration that uses the gh-page package to deploy to github. After configuring, we push the code to github

Finally, deploy deploy with the command

Once deployed, we will go to the settings of the current repository on github to see the following settings:

We can see that our github page is public at url: https://{username}.github.io/{repo-name} , and the source code of this static page is the gh-pages branch.

So what did package gh-pages actually do ?. We proceed to checkout to gh-pages

Here we see all the code in the master branch will be complied back into files and folders so that the github page can understand, so later, just merge the code into the master and deploy with the yarn run command, branch gh-pages will be updated again.

So now we can work with reactjs normally, deploy task has pakage gh-pages lo )

Conclude:

So I have introduced you how to deploy a static web application with reactjs on github pages. You can enjoy creative with github page and reactjs without worrying about the cost.

Here I also wrote a cv page with reactjs and typescript on the github page here

A few screenshots

It looks dangerous =))

Because new to reactjs, so the code is very disgusting, if you are interested, you can clone your source code at https://github.com/iamPhong/mycv and modify it accordingly.

I wish you a new day of working effectively and full of energy

Refer:

https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f