If you lot accept a project and desire to host information technology for complimentary without buying a domain, using GitHub Pages is a bang-up 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 projection with routing that yous'll deploy later. However, if you accept an existing React projection, experience gratuitous to skip this footstep.

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

          npx create-react-app react-gh

Navigate to the created folder and start your application.

          npm run start

Next, open up the projection folder with your preferred lawmaking editor. In the src folder, delete everything except App.js and index.js. Supervene upon the contents in App.js with the following:

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

Add Routing

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

          npm install react-router-dom

In App.js, add the link to the nearly folio:

          import { Link } from "react-router-dom";
function App() {
            render (
            <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 every bit your dwelling house page, you lot simply demand to create the About component:

          const About = () => {
            render (            
            <div>
            <Link to="/">Domicile</Link>
            <h2>About Folio</h2>            
            </div>
            );
}
export default Near;

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

Alter alphabetize.js to match the URL to the respective components:

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

Observe how yous used HashRouter instead of BrowserRouter. Using BrowserRouter would heighten a 404 fault. This is because routing works differently in GitHub pages. Hashrouter does not raise an fault considering 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:

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

Create GitHub Repository

Since GitHub Pages will host your awarding by converting the repository to a website, you demand to create a GitHub repository. Go to your GitHub account and create a new repository with the same proper noun as your projection.

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

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

Finally, push the local repository to GitHub:

          git branch -Grand main
git button --set-upstream origin primary

Deploy React App to GitHub Pages

In order to utilise GitHub Pages, yous'll have to install it first:

          npm install gh-pages

gh-pages will permit 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 exist the home URL of the app:

          "homepage": "https://<username>.github.io/<repository-name>/",
"scripts": {
            "predeploy": "npm run build",
            "deploy": "gh-pages -d build",            
            "showtime": "react-scripts outset",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject"
            }

Run the following command to complete the deployment process:

          npm run deploy

Your awarding is now deployed to GitHub and you tin visit it at https://<username>.github.io/<repository-name>.

Practice More than With GitHub Pages

GitHub Pages provides a simple way of deploying websites to the internet for complimentary. While y'all only saw how you tin can deploy a simple React projection, GitHub Pages allows you lot to do so much more than. For example, you can create a full-blown blog using Jekyll and even host it using a custom domain.

How to Host a Website for Free Using GitHub Pages

Read Next

About The Author

Mary Gathoni (16 Articles Published)

Mary Gathoni is a software developer with a passion for creating technical content that is not only informative simply also engaging. When she is not coding or writing, she enjoys hanging out with friends and being outdoors.

More From Mary Gathoni