Deploying React to GitHub Pages

2
votes

I followed these tutorials:

https://pages.github.com/

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Right now my repo name is: username.github.io [username replaced with mine].

I am confused on what I am supposed to put on my package.json file because it conflicts with the React deploy tutorial. This is what I have right now [username replaced with mine]:

{
    "name": "personal-website",
    "homepage": "https://username.github.io",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "gh-pages": "^1.0.0",
      "react": "^15.6.1",
      "react-bootstrap": "^0.31.1",
      "react-dom": "^15.6.1",
      "react-scripts": "1.0.10"
    },
    "scripts": {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build",
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
}

Every time I load to the username.github.io page, it only displays the README.md file and not the actual React application. My index.html file has to be in the public directory or else npm start will not load properly. Any suggestions on how to solve this?

2
reactjsnpmgithub-pages

2 Answers

0
votes

You can use https://github.com/shinnn/gulp-gh-pages. I use that lib myself to deploy a react application to github pages: https://github.com/madnight/githut/blob/master/gulpfile.babel.js

0
votes

I do not want to add an extension to the URL after GitHub. So, I ended up using surge instead: http://jakewiesler.com/surge-vs-github-pages-deploying-a-create-react-app-project/

It works and is very easy to use.