Base URL for React.js website on Github pages

Question

I am deploying my portfolio website, made using React.js on Github pages.

All the tutorials mention the following url as the url to the homepage:

{
  ...
  "homepage": "https://myusername.github.io/my-app",
  ...
}

So to open the website, the url would be https://myusername.github.io/my-app. Is it possible to somehow rename the url to only https://myusername.github.io/ as is possible while deploying using pure JavaScript?

I have tried

{
  ...
  "homepage": "https://myusername.github.io/",
  ...
}

already. It only renders the README.md.

Links: https://github.com/Shubhayu-Das/portfolio & https://github.com/Shubhayu-Das/Shubhayu-Das.github.io

Edit: I am using gh-pages to build and deploy the app to Github Pages.

Answer 1

I found the solution to exactly what I was seeking in the following post https://medium.com/@hannawerman/deploy-your-react-app-on-github-pages-a1d4cfdc88e9

Hope this helps!

Answer 2

I forked your repo and rebuilt and redeployed your project and it seem to have fixed the problem for me.

These are the commands I used after forking and cloning:

1. npm install
2. npm run build
3. npm run deploy

Also I had to change the homepage attribute according to my repository, but you don't need to do it.

You can check out at: https://github.com/AdityaSrivast/Shubhayu-Das.github.io

Hope it helps!

Answer 3

I guess this is a common issue. I believe your CI is deploying it from master branch but it has to deploy from gh-pages branch. In your Project Settings, you have to select the right branch. Currently, I believe it should be something like this:

But you should be using the gh-pages branch or upload the build directory contents to a directory called docs and use the right option like this:

Hope this helps you to locate the problem and solve it.