CODEWITHSUNDEEP
reactjsgitgithub-pages
Mahsan Nourani
Mahsan Nourani

Reputation: 306

How to deploy react app to Github pages for personal page

There are a few tutorials out there on how to deploy a react-app to GitHub project pages, e.g., this post (i.e., www.{github-username}.github.io/{project-name}), using npm run deploy.

However, when I tried to deploy the react-app I built as my personal page (i.e., the URL will be www.{github-username}.github.io/), the terminal would freeze after a successful build while trying to deploy.

My package.json looks like below (as suggested by the existing tutorials):

{
  "homepage": "http://{github-username}.github.io/",
  "name": "personal-page",
  ...
}

"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

and I ran npm run deploy command. The project builds successfully and then the terminal crashes before deploying. When I use CTRL+C to terminate the process and rerun the command, it shows me this error: "Branch gh-pages already exists". Some already mentioned running this command will solve the problem: rm -rf node_modules/gh-pages/.cache, but it did not work for me.

Upvotes: 6

Views: 2765

Answers (1)

Mahsan Nourani
Mahsan Nourani

Reputation: 306

Since I spent two hours to solve this problem and I had to get this information from multiple sources and solutions, I decided to spend another hour to write this post here for other future deployers (!) facing the same issues.

To provide context, For each account, GitHub allows hosting 1 personal static webpage and numerous static project webpages on GitHub Pages for free. To use this functionality, you must change the repository name to {github-username}.github.io for the personal page and {github-username}.github.io/{project-name} for any projects you want to deploy to GitHub Pages.

This question and answer are about the personal page only, but might give some insights for debugging the project pages as well. Tutorials for deploying a react project using npm can be found online (e.g., see this post).

  1. To fix the freezing problem, someone suggested that you change the deploy command to the following:

    "scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
},

Adding -b master specifies the branch your project will be deployed to. This helps avoid the terminal freezing and your code actually gets deployed and accessed via www.{github-username}.github.io/, but all the build file information will be committed and pushed to the master branch.

What I wanted to do was having the source project on the master branch and having the deployed website on a different build branch. But also, I did not want the URL to include the branch name as well.

I tried changing -b master to -b {deploy-branch=name}, e.g., -b gh-pages where gh-pages is the name of the branch I'd like to deploy my website to. This caused running npm run deploy to freeze again!!

To solve this problem, I had to manually create a remote branch, called gh-pages and run the deploy command again.

  1. To make sure the GitHub pages will be loaded from the gh-pages branch, I had to go to my GitHub repository > Settings > GitHub Pages and change the branch to gh-pages (see image below).

enter image description here

After step 2, my website was up and running and could be accessed via www.{github-username}.github.io/.

You can go ahead and push your project commits to the branch master as well. Doing this, of course, will not affect your build and GitHub personal page.

  1. The last problem is avoiding the error "Branch gh-pages already exists" after using CTRL+C to terminate the unresponsive terminal.

The solution is removing the cache, but since version 3.1 of gh-pages node_module, they moved the cache to a different path. So instead of:

rm -rf node_modules/gh-pages/.cache

, I used:

rm -rf node_modules/.cache/gh-pages

to avoid the error (thanks to Nicholas for his comment).

I hope this helps other people as well :)

Upvotes: 8

Related Questions