Github Pages does not work for me! MY FIX

Image for post
Image for post

FIRST OF ALL

Image for post
Image for post
select publishing source to gh-pages branch
...
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...

IF THIS DOES NOT WORK

Image for post
Image for post
404 page for www.username.github.io/<nameOfProject>

AND

THEREFORE, what we will be doing below is to ‘hack’ or try alternative approaches JUST SO THAT github pages can work properly!

#### Notes on client-side routing
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
Explanation taken from https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

OKAY… WHAT SHOULD I DO NOW:

...
"homepage": "https://yourUserName.github.io/yourProjectName/",
...
// saves gh-pages npm module as a dev dependency
npm install gh-pages --save-dev
... //Added predeploy and deploy"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
npm run predeploy
npm run deploy
import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Homepage";
import Page2 from "./components/Page2";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<HashRouter>
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/page2" component={Page2} />
</Switch>
</div>
</HashRouter>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Homepage";
import Page2 from "./components/Page2";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<HashRouter basename={process.env.PUBLIC_URL}>
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/page2" component={Page2} />
</Switch>
</div>
</HashRouter>
</div>
);
}
}
export default App;

Aspiring Software Engineer | Product Enthusiast https://www.linkedin.com/in/daryllwong/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store