CODEWITHSUNDEEP
reactjsreduxgithub-pagescreate-react-app
niknau
niknau

Reputation: 61

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

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.

Upvotes: 4

Views: 8459

Answers (5)

Ori Naftaly
Ori Naftaly

Reputation: 1

I had the same problem.

  1. make sure you change the source from master branch to gh-pages branch.
  2. If you don't have a README.md file, create one.

Upvotes: 0

Saksham Agarwal
Saksham Agarwal

Reputation: 1

Go to Settings-> Github Pages -> Source change source from master branch to gh-pages branch.

This will surely help you . Ping me in case you encounter any other doubt.

Upvotes: 0

sudo bangbang
sudo bangbang

Reputation: 28179

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:

Upvotes: 6

chia yongkang
chia yongkang

Reputation: 782

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

Upvotes: 4

andrewwong97
andrewwong97

Reputation: 9179

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.

Upvotes: 1

Related Questions