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

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)

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

> npx create-react-app mediumrepo
> npm install gh-pages
> npm install react-scripts
"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"
},
"name": "mediumrepo",
"version": "0.1.0",
"homepage": "https://mediumUser.github.io/mediumRepo","private": true,
> git remote add origin https://github.com/mediumUser/mediumRepo.git
> npm install react-router-dom
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();
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;
> npm start

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

> npm run deploy

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

--

--

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