Host A Free React Website On GitHub Pages : 15 Mins Guide

6 min readDec 18, 2020

You are here to create a multipage React website and host it free of cost on GitHub Pages. We got 15 mins, let's get going.

Notes -

We would be creating a React website using create-react-app.
We are not going to make any CSS or HTML changes to the website.
For multipage support, we would be integrating react-router.
I am utilizing Google Domains for setting up a custom domain. You can do the same with any of your preferred domain registrar/manager.

Prerequisites -

A GitHub account. (Obviously!)
Git installed on your computer.
NodeJS and NPM installed on your computer.
A Custom Domain.

Step 1 : Creating A GitHub Repository (~1 Min)

You might have done this numerous times in the past. If you already have a repository to start with, skip this and jump to the next step. If not, creating one is easy; just follow along.

Enter the repository name, description (optional) and click on the “Create repository” button at the bottom.

Step 2 : Creating And Setting Up React Website (~10 Mins)

We are going to divide this into two tasks. To start with, we will generate the website code using “create-react-app”, install the utility packages, and configure build settings. And then turn the website into a multipage website.

Generating Website Code And Setting Up The Build :

We will use “npx” to generate website code. Open the terminal, and execute the following command inside the directory where you want your website code to live.

> npx create-react-app mediumrepo

Next is installing the utility packages to make our life easier. Execute the following command from inside the directory containing the website code.

> npm install gh-pages
> npm install react-scripts

Let us configure the build settings now. Open “package.json” in the editor of your choice and add the following two lines inside the “script” section.

"scripts": {
  "start": "react-scripts start",  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

And add a new property with the name “homepage” and the value set to,
https://{username}.github.io/{repository-name}.

"name": "mediumrepo",
"version": "0.1.0","homepage": "https://mediumUser.github.io/mediumRepo","private": true,

Finally, configure the Git. From inside the directory containing the website code, execute the following command.

> git remote add origin https://github.com/mediumUser/mediumRepo.git

If you just want a single-page website, you can skip the task below and jump directly to the next step.

Anyhow it is a good idea to test the changes so far, you can jump to the next step and continue from here once you have verified the changes.

Turning Website Into A Multipage Website :

Let us start by installing the “react-router-dom” package. From inside the directory containing the website code, execute the following command.

> npm install react-router-dom

Next, open “index.js” in the editor of your choice. Import “HashRouter” and replace “React.StrictMode” with “HashRouter”.

import ReactDOM from 'react-dom';import { HashRouter } from 'react-router-dom';import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<HashRouter>
    <App />
  </HashRouter>,  document.getElementById('root')
);
reportWebVitals();

Finally, to add routes, open “App.js” and create routes as shown in the image below.

import { Switch, Route, Link } from "react-router-dom";import "./App.css";function App() {
  return (
    <div className="App">      <Switch>
         <Route path="/page2">
           <div className="Page2">
             <h1>This is Page 2</h1>
             <Link to="/page1">Goto Page 1</Link>
             <br/>
             <Link to="/">Goto Default Page</Link>
           </div>
         </Route>
         <Route path="/page1">
           <div className="Page1">
             <h1>This is Page 1</h1>
             <Link to="/page2">Goto Page 2</Link>
             <br/>
             <Link to="/">Goto Default Page</Link>
           </div>
         </Route>
         <Route path="/">
           <div className="DefaultPage">
             <h1>This is Default Page</h1>
             <Link to="/page1">Goto Page 1</Link>
             <br/>
             <Link to="/page2">Goto Page 2</Link>
           </div>
        </Route>
      </Switch>    </div>
 );
}export default App;

That’s all the code we need to write. The website is going to have 3 pages, page1, page2, and a default page. Each page is going to have a link to two other pages.

You can test everything locally by running the following command inside the directory containing the website code.

> npm start

Step 3 : Deploying And Verifying The Website (~2 Mins)

Remember the deploy and pre-deploy options we added to “package.json”? this is where we are going to use them. Just one command and your website code is built and uploaded to GitHub.

But before that, do make sure you setup your GitHub repository in your working directory. The instructions for this could be found on the portal, in your repository right after you create it.

Lets deploy, in the terminal while you are inside the directory containing the website code, execute the following command.

> npm run deploy

This will build the website and put the built code inside the “build” directory. And will also upload the built code to “gh-pages” branch in your repository.

You can verify the website by going to,
https://{username}.github.io/{repository-name}

Note that it might take a couple of minutes for the website to be accessible.

You have to repeat this step every time you make some changes and want those changes to be reflected on your website.

Step 4 : Setting Up Custom Domain (~2 Mins)

Setting up a custom domain is a two-part process. First, you have to configure custom domain settings in the GitHub repository. And second, you have to create domain records in your domain registrar/manager.

Configuring Custom Domain Settings In GitHub Repository :

Scroll down and find the “GitHub Pages” section. Under the “Custom Domain” textbox enter your domain with the “www” subdomain and click on “Save”.

This will create a “CNAME” file in the “gh-pages” branch of your repository.

Once you save the settings scroll down to the “GitHub Pages” section again. This time the checkbox in front of “Enforce HTTPS” would be unchecked, click on that checkbox to enable HTTPS.

GitHub Pages is all set to serve your website. Now we need to configure the domain records so that the requests are forwarded to GitHub Pages.

Configure Domain Records In Domain Registrar/Manager :

Before we proceed, reminding you again that I am using Google Domains. You should be able to find similar settings with other Domain Registrar/Manager.

Open DNS settings and create a custom record. Enter “www” inside the name textbox, change the records type to “CNAME”, leave TTL default, type “{username}.github.io.” inside the data text field, and click “Add”.

This will redirect requests with the “www” subdomain to GitHub Pages.

You can use any subdomain instead of “www” and it will work just fine.

If you also want to redirect the naked domain (domain name without ”www” or any other subdomain) to GitHub pages, open DNS settings and create a subdomain forwarding record with the following settings.

Type “@” inside the subdomain textbox, enter your previously configured subdomain URL inside the destination URL textbox, mark it as “Permanent redirect” along with “Forward path” and “Enable SSL”, and click “Add”.

This is it, you are all set. The custom domain changes might take some time to reflect. Till then you can continue modifying your website to turn it into a delightful experience.