Search code examples
reactjsgithub-pages

GH Pages Deploy Blank Page React

I'm stuck on deploying my react app. It doesn't seem to create any errors but the page is blank. The app renders in local host.

Here is the repository: https://taylorepskamp.github.io/portfolio/

This is the top of my package.json file

  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://taylorepskamp.github.io/portfolio/",

Here is my index.js file

class Root extends Component{
    render(){
        return(
                    <DesignerPortfolio/>
        )
    }
}

ReactDOM.render(<Root/>, document.getElementById('root'));
serviceWorker.register();

I've looked at the console for any errors or reason for why the page is blank, I've tried deploying a very simple version of the app, I've repeated the initialization/deploy steps with a new repository, I've deleted the browser router portion of the index.js...Thanks in advance for the help!

Solution

  • You deleted a lot of necessary files for your React program. I suggest you create a new React App and copy and paste some of the code(Be careful with this because you don't want to copy the errors).

    I had a similar problem until I watched this tutorial.

    1) Change your "homepage": "https://taylorepskamp.github.io/{Name of your project}/".

    2) And change my the import of route component( BrowserRouter as Router to HashRouter as Router) in the index.js file.

    3) Then re-deploy