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.
Very informative and to the point! Keep posting informative content. I followed this blog post from your YouTube Channel! Cheers!
Thanks alot:)