We all would love to make the app accessible to the world! But what if I don’t want to pay for hosting my web app?
Thanks to the generous development community, there are lots of free hosting service providers. One of my favourites is GitHub Page!
Before we start…
Please ensure that you have your app source code pushed to GitHub and the repository visibility is public. (Well, if you are a GitHub Pro user, you may keep the visibility private.)
We will use React app as the example in this article. You are free to use any other libraries as long as it is a static app.
Creating a React app is not the scope of this article, if you are interested to learn more, you can refer to create-react-app guideline.
Step 1: Install the
gh-pages package into your project
npm install gh-pages --save-dev
Step 2: Add
homepage property to the
For example, my GitHub username is
abbylow and my repository name is
lottery-frontend then my homepage property will be
Step 3: Add
deploy script to the
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
FINAL STEP: Deploy it!
npm run deploy
That’s all! You can enter the URL that you set earlier as the
homepage property and see your web app now!
The changes in GitHub repository
You should be able to see a new branch named
gh-pages created in your GitHub repository now.
Settings then clicks
Pages , you may see that the site is published to the URL that we set in the package.json as
If you don’t see the published notification, please check
Sourcesection and select
gh-pagesbranch as the source branch and save it.
It might take few mins to deploy your website. Please be patient.
Something to take note
GitHub Pages is a static site hosting service. This means if your app is written in NextJs, you have to export the application as static website before hosting it using GitHub Page.
Thanks for reading!