Why is my create-react-app showing README.md, not index.html?

Question

Why is my create-react-app showing README.md, not index.html?

I've run npm run build -> yarn run deploy, checked the file structure multiple times and read the gh-pages docs. Can't find any other thread with the same issue out there.

Thanks.

Answer 1

You can checkout the documentation from create-react-app regarding this.

Add homepage to package.json .

Open your package.json and add a homepage field for your project:

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

or for a GitHub user page:

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

Create React App uses the homepage field to determine the root URL in the built HTML file.

Install gh-pages and add deploy to scripts in package.json

Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.

To publish it at https://myusername.github.io/my-app, run:

npm install --save gh-pages

Alternatively you may use yarn:

yarn add gh-pages Add the following scripts in your package.json:

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

The predeploy script will run automatically before deploy is run.

If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:

First, change your repository's source branch to be any branch other than master. Additionally, tweak your package.json scripts to push deployments to master:

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

Deploy the site by running npm run deploy

Then run:

npm run deploy

Step 4: Ensure your project’s settings use gh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

Answer 2

The most common mistake is when our GitHub Pages option in your GitHub project settings is set to use the master branch instead of gh-pages.

Just Change it to the gh-pages branch and you are good to go!

see below for example: gh-pages branch

Answer 3

Hopefully you have solved this issue already but I had the same problem with gh-pages and CRA deploy not working for github user pages (your root page, not project pages).

What I did was change my "deploy" line to "deploy": "mv build/* ./* && rmdir build", since GitHub user pages only builds from master. This places all of your build files in the topmost directory of your repo. Push to master and your page should be deployed.