# How To Deploy A React Application For Free With GitHub Pages

**URL:** <https://onehack.st/t/how-to-deploy-a-react-application-for-free-with-github-pages/219154>\
**Category:** Tutorials & Methods\
**Tags:** programming, tips-tricks\
**Created:** [April 18, 2022, 11:47am UTC](https://onehack.st/t/how-to-deploy-a-react-application-for-free-with-github-pages/219154 "2022-04-18T11:47:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![WhiteHat](https://onehack.st/user_avatar/onehack.st/whitehat/32/162514_2.png) [@WhiteHat](https://onehack.st/u/WhiteHat)\
**Post date:** [April 18, 2022, 11:47am UTC](https://onehack.st/t/how-to-deploy-a-react-application-for-free-with-github-pages/219154/1 "2022-04-18T11:47:25Z")

</div>

If you have a project and want to host it for free without buying a domain, using GitHub Pages is a great choice. GitHub Pages converts your repositories into websites and allows you to host unlimited project sites.

Deploying a React site with navigation requires extra configuration compared to deploying a static site. This tutorial walks you through the whole process from creating a GitHub repository to having a hosted site.

## Create a React App

For demonstration purposes, you need to create a React project with routing that you’ll deploy later. However, if you have an existing React project, feel free to skip this step.

In the terminal, run the **create-react-app** command to quickly scaffold a React project:

```auto
npx create-react-app react-gh

```

Navigate to the created folder and start your application.

```auto
npm run start

```

Next, open the project folder with your preferred code editor. In the **src** folder, delete everything except **App.js** and **index.js**. Replace the contents in App.js with the following:

```auto
function App() { return ( <div> <h2>Github Pages</h2> <h3>Deploying React to Github</h3> </div> );}export default App;

```

## Add Routing

To add routing to your application, first, install **react-router-dom** :

```auto
npm install react-router-dom

```

In App.js, add the link to the about page:

```auto
import { Link } from "react-router-dom";function App() { return ( <div> <Link to="/about">About</Link> <h2>Github Pages</h2> <h3>Deploying React to Github</h3> </div> );}export default App;

```

Since App.js will act as your home page, you only need to create the **About** component:

```auto
const About = () => { return ( <div> <Link to="/">Home</Link> <h2>About Page</h2> </div> );}export default About;

```

Now, you need to create the routes and configure a React router.

Modify index.js to match the URL to the respective components:

```auto
import React from "react";import ReactDOM from "react-dom";import App from "./App";import { HashRouter, Routes, Route } from "react-router-dom";import About from "./About";ReactDOM.render( <React.StrictMode> <HashRouter> <Routes> <Route path="/" element={<App/>} /> <Route path="/about" element={<About/>}/> </Routes> </HashRouter> </React.StrictMode>, document.getElementById("root"));

```

Notice how you used **HashRouter** instead of **BrowserRouter**. Using **BrowserRouter** would raise a 404 error. This is because routing works differently in GitHub pages. **Hashrouter** does not raise an error because it uses the hash portion of the URL to sync the UI with the URL.

The final step is committing all the new changes to Git:

```auto
git add .git commit -m "Create React app"

```

## Create GitHub Repository

Since [GitHub Pages](https://pages.github.com/) will host your application by converting the repository to a website, you need to create a GitHub repository. Go to your GitHub account and create a new repository with the same name as your project.

Next, add the GitHub repository to your local repository as a remote:

```auto
git remote add origin <https://github.com/><username>/<repository name>.git

```

Finally, push the local repository to GitHub:

```auto
git branch -M maingit push --set-upstream origin main

```

## Deploy React App to GitHub Pages

In order to use GitHub Pages, you’ll have to install it first:

```auto
npm install gh-pages

```

**gh-pages** will allow you to create the **gh-pages** branch where you’ll deploy your code.

Next, go to your **package.json** file and add the homepage which will be the home URL of the app:

```auto
"homepage": "https://<username>.github.io/<repository-name>/","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" }

```

Run the following command to complete the deployment process:

```auto
npm run deploy

```

Your application is now deployed to GitHub and you can visit it at **https://.github.io/**.

**Enjoy!**

---

<div class="post-metadata">

**Author:** ![New\_H](https://onehack.st/user_avatar/onehack.st/new_h/32/110793_2.png) [@New\_H](https://onehack.st/u/New_H)\
**Post date:** [April 18, 2022, 12:47pm UTC](https://onehack.st/t/how-to-deploy-a-react-application-for-free-with-github-pages/219154/2 "2022-04-18T12:47:27Z")

</div>

I can also add that you can use [Vercel](https://www.vercel.com).  
They also provide a free subdomain using their own domain, giving you the possibility to add your own, host your own site, and all of this for free (there are premium options).

Personally, I think their UI is better than GitHub’s and you can also use the GitHub, GitLab or 3rd party Git integration.