Hosting
How to Host Your React App on GitHub Pages for Free
Host your React app on GitHub
It is easy for working professionals to spend money on hosting their websites, but for students, it is a really big problem. Students like me and you already having economic difficulties and bills for hosting the React app are a serious problem.
Therefore, I would like to describe how to host your React app on GitHub Pages for free. This is my 27th article on Medium.
GitHub has a free service called GitHub Pages for students like us. A simple name and even simpler workings. Host static web pages, like a blog or portfolio, on GitHub’s servers for free.
Your domain name will be like this: {username}.github.io/{repo-name}, but if you have your own domain name, you can use that also. They can be bought as they are relatively inexpensive. Let’s start with how to host a basic React application using GitHub Pages.
I am assuming you have some idea about how to create a React application and what GitHub is. Let’s roll.
Set Up Repository
It’s all in the repository. Go to your GitHub profile and create a new repository. For example, I would like to create a repository named React-Deploy.
If you click the Create repository green button it will redirect into another page. Just keep the page, don’t close the tab or window for now.
Set Up and Deploy React App
For this tutorial, I want to use create-react-app. Therefore, I run the following commands in my PowerShell/terminal in a specific folder.
$ npx create-react-app react-deploy
$ cd react-deployThen, open that project in VS Code and run the following commands in the integrated PowerShell/terminal in VS Code. Replace the username with your own GitHub username.
$ git init
$ git add .
$ git commit -m "add: initialCommit"
$ git remote add origin https://github.com/username/React-Deploy.git
$ git push origin masterIf you’ve already developed a React app, follow the next set of instructions. Before that, make sure your React app code is already pushed to your GitHub account.
For the first step, install the gh-pages package as a dev-dependency of the React app.
npm install gh-pages --save-devFor the second step, open the package.json in your React application and add the homepage property.
Define homepage’s value to be the string http://{username}.github.io/{repo-name}, where username is your GitHub username, and {repo-name} is the name of the GitHub repository.
Since my GitHub username is “sabesansathananthan” and the name of my GitHub repository is “React-Deploy”, I added the property as mentioned below:
“homepage”: “http://sabesansathananthan.github.io/React-Deploy"
For the third step, add the deploy script commands in your project’s package.json file.
In the package.json file, add the predeploy property and the deploy property with the existing scripts property. Your package.json scripts should like this:
The predeploy script initiates after running our deploy script, which bundles our application for deployment.
Now, deploy your application to GitHub Pages. For that, run the following commands in the integrated PowerShell/terminal in VS Code.
npm run deployWhen you’ve successfully deployed the app, open the GitHub repository in your browser.
Click the settings tab of the repository and scroll down until you reach the GitHub Pages section and choose the gh-pages branch as the source.
Boom, your React application is hosted on GitHub Pages.
Using Custom Domains
If you don’t like the github.io in your default domain name, choose another domain name. Github Pages lets you use your own custom domain name and setting it up is just like walking on the beach.
If you don’t already have a domain, go and buy one. There are some free domains you can get from this link. If you’re going to buy a domain, it will cost you probably $1 or $2.
Go to the settings in your registry and add a new domain name. It will generate a CNAME file, don’t delete it in your directory.
The GitHub part is done here. Now, you need to make domain side changes.
Go to the domain you bought, sign in, and pick the domain you want to use. Check the Manage DNS or DNS Settings. Now you have two improvements to make to your DNS.
Records
This is essentially an apex domain which ensures that if any user writes only react-deploy.cf instead of https:/react-deploy.cf or www.react-deploy.tk, it will still function.
There are four IP addresses that you have to use to connect to the server. Those are shown below. But please make sure you go to the official documents and use the new ones.
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153CNAME
This can be achieved by using CNAME if you choose to use www or some other similar sub-domain. We need to point our subdomains to our primary repository tab.
Therefore, we will redirect it to sabesansathananthan.github.io/React-Deploy. Please ensure that at the end of the address, there is a line. It’s not a typo.
Now that both are set, reflections can take up to 24 hours but typically take 45 minutes to one hour. Once this is completed, please search for your website by typing in your custom domain. It’s up and running. It’s on.
Subdomain
We’re just setting up a subdomain but what if you have a forum and want a separate subdomain like, blog.react-deploy.tk? Would that suit you? I have you covered, don’t worry.
Build a separate file and from the beginning, follow the same method.
Now go to your domain control panel and add another CNAME record. This time, your subdomain is ready to roll instead of using a www page, and voila. Make sure you use your subdomain (name) in the settings in the repository.
Conclusion
It is easy to create a React app and deploy it to GitHub. There are other free hosting sites as well such as Firebase, Heroku, 000webhost, etc. but most developers use GitHub. Therefore, it is easy to host websites on GitHub.
GitHub Pages is free. You can host your website, including custom domain names, sub-domains, and all via secure HTTPS. You can find the example code in my GitHub repository.
Thank you for reading.
