Host React Js website live on the internet using github

Well, hostings is paid, but if you are a developer with technical skills, you can always find a free solution.

So today in this article we will use GIT and our developer skills to host a react js frontend website on Github for absolutely free.

Let’s get started !

Watch video instead

Step 1 – Setup git in your system

• First, download gitbash on your system, if you haven’t already – Git bash
• Once downloaded and installed, go to your folder and right click (or shift + right click) , and you will see 2 options

• Now , got ahead and click on “Git Bash Here”

One command prompt repo might have opened , just minimise it and follow step 2

Step 2 – Create a repository

• Login to github and sign in/sign up
• Create a new repository (make sure you keep it public)

• Once repository is created , go back to you git bash terminal and follow the third steps

Step 3 – Push your code from local to git repo

Open your gitbash terminal at the folder where your code is located.

Start typing the below codes

git init
git add .
git status(check all the files are commited or not)
git commit -m "first commit"
git branch -M main
git remote add origin 'your_url_name'
git push -u origin master

Step 4 – Install gh-page and edit package.json file

• Install gh-page npm package

Check which one command works.

npm install --save gh-pages
or
npm install gh-pages --save-dev

• Edit the package.json file and added the below lines

Eg – “homepage” : “https://<username>.github.io/<repo-name>

//After name key-pair value ,
    "homepage": " https://highhimanshu.github.io/demo-crud1",
//Inside script object
    "predeploy" : "npm run build", 
    "deploy": "gh-pages -d build", 

Step 5 – Deploy

Now write the below command to deploy your website to GitHub and create a link

npm run deploy

Once the build is successful, A Link is created automatically, that will be your hosted website link

Go to repo > setting > pages > select gh-pages and save.