Sign in
Log inSign up
Hosting a react application using GitHub pages ๐Ÿš€

Hosting a react application using GitHub pages ๐Ÿš€

Parth Pandya's photo
Parth Pandya
ยทJul 16, 2021ยท

3 min read

Boo-yah! Ever wondered how to deploy a react application on gh-pages?๐Ÿค” I learned it today and Iโ€™ll share it here how one can do that ๐Ÿ˜

What made me learn it?๐Ÿค”

Portfolio site of mine is developed in react-js. For hosting your portfolio with username.github.io you have to enable gh-pages. But this is a react application and before this, I didnโ€™t know we can even deploy a react-app using gh-pages so what I did? The traditional way we follow to deploy a react-app is using Netlify. So what I did is, I added a CNAME file to add a customized domain which will eventually redirect username.github.io to sitename.netlify.app . Although it is a great trick, but every time when youโ€™ll use gh-pages after that, this redirect thing happens. As a result of which, no results will be fetched from found at requested URL rather than a pissing 404.

I needed a solution immediately as I generally use gh-pages to host readmes. The only solution I see was to remove the domain customisation and use username.github.io For this, I had to find a way where I can actually host my react application using the gh-pages. ยฏ_( อกโ› อœส– อกโ›)_/ยฏ

The trick โœจ

There are very few steps involved to host your react-application using gh-pages. These are listed in the below bulletin.

  • Create a react-app using create-react-app or blazepack create my-app --template=react whatever you prefer. Test it locally and complete developing the app.
  • Now open package.json in an editor. And do as directed below ๐Ÿ‘‡ Add the below line to the top of everything in the file
//...
"homepage": "https://<username>.github.io<repository_name>"
Add below things to the scripts in the file
//...
"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
  • Initialize an empty git repository even without README.md as it will be created already when youโ€™ll use create-react-app but not in the case of blazepack.
  • Shortcut to perform the above steps in one go ๐Ÿ‘‡
    $ sed -i '5i\  "homepage": "https://<username>.github.io<repository_name>",' ./package.json
    $ sed -i '15i\    "predeploy": "npm run build",' ./package.json
    $ sed -i '16i\    "deploy": "gh-pages -d build",' ./package.json
    
  • Final step to deal is to do npm install gh-pages --save-dev which will add gh-pages as a dev-dependency in your project.
  • All set ๐Ÿค final steps, just a single command away. Just run npm run deploy from the root of the project directory. This will generate a production build of your project and will deploy react-app to gh-pages. That was all about how to host up your react-app using gh-pages ๐Ÿš€

Quick fun fact about Readme ๐Ÿ˜Ž

Ever seen a stubborn link with the repository name stuck at the top of README.md when hosted using gh-pages? Well, that link can be removed from there adding a _config.yml file. Just add title : <title you want to display at Readme>

Thatโ€™s it, we fixed it โœ”๏ธ