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 package.json
file
"homepage": "https://<username>.github.io/<repository>"
For example, my GitHub username is abbylow
and my repository name is lottery-frontend
then my homepage property will be https://abbylow.github.io/lottery-frontend
Step 3: Add predeploy
and deploy
script to the package.json
file
"scripts": {
//...
"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!
Congratulations!
The changes in GitHub repository
You should be able to see a new branch named gh-pages
created in your GitHub repository now.
Go to Settings
then clicks Pages
, you may see that the site is published to the URL that we set in the package.json as homepage
property.
If you don’t see the published notification, please check
Source
section and selectgh-pages
branch 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!