loading...
Cover image for Deploying React App On GitHub Pages In 6 Steps.

Deploying React App On GitHub Pages In 6 Steps.

youssefzidan profile image YoussefZidan ・2 min read

Show your React App to the world for FREE Using GitHub Pages in 6 Easy Steps.

1.Create a Github Repository.

Create a Public GitHub Repository for your React App.

You need to create a GitHub account if you don't have it yet.

Creating Repo

Make a note of your "Owner Name" and "Repository Name" in GitHub.

Creating Repo

2. Adding homepage key.

Go to package.json and make a new key named homepage and put its value something like the following
http://<owner-name>.github.io/<repo-name>/

package.json

{
  "homepage": "http://YoussefZidan.github.io/youssef-deploy/",
  "name": "myApp",
  "version": "0.1.0",
  //...
}
Enter fullscreen mode Exit fullscreen mode

3. wrap your routes with <HashRouter basename="/">

We need this step to prevent GitHub to redirect your app to 404 in case you visit any internal page directly via url

routes.js

import React from "react";
import { Switch, Route, Redirect, HashRouter } from "react-router-dom";
import HomePage from "./pages/home/homePage";

function routes() {
  return (
    <HashRouter basename="/">
      <Switch>
        <Route path="/home" render={(props) => <HomePage {...props} />} />
        //...
        <Redirect from="/" exact to="/home" />
      </Switch>
    </HashRouter>
  );
}

export default routes;

Enter fullscreen mode Exit fullscreen mode

4. Build Your app

Run the build command

npm run build 
Enter fullscreen mode Exit fullscreen mode

You will find a newly created folder named build.

Build Folder

5. Create a gh-pages Branch.

Create a new branch and name it gh-pages

git checkout -b gh-pages
Enter fullscreen mode Exit fullscreen mode

And push what's inside the build folder to the created repo.

6. Change Repo Settings.

Go to the settings and in Githib Pages section change the source branch to gh-pages

Alt Text

Now wait a few minutes and you will see your app published in a URL like this

https://youssefzidan.github.io/youssef-deploy/
Enter fullscreen mode Exit fullscreen mode

You can visit my website I published on GitHub Pages Here

Thank You.

Discussion

pic
Editor guide
Collapse
kamalo__22 profile image
Ibrahim Kamal

tslam edak ya handasa 💜

Collapse
youssefzidan profile image
YoussefZidan Author

7abeby ❤️