React & Github Pages

A brief on deploying a React project to Github Pages.

Posted Sep 9, 2024

1 min read

Introduction.

I’ll be covering how to host a React project on GitHub Pages, using this website as an example. This will be a straightforward process which provides a clear, step-by-step method to get your application live and accessible on the web.

It is essential to understand that only static pages can be publish to Github Pages.

Pre-requisites

This step is optional, but I would like to share my development environment. If you already have a development environment or a React project, feel free to skip ahead to the next section.

Make sure you have React, Node.js, and Git installed. I am using Visual Studio Code with the ES7 React/Redux/GraphQL/React-Native snippets extension. I debug my projects with Firefox and React Developer tools for Firefox. It is always good practice to double check and ensure you are always installing anything from a trusted source.

Step 1: Host your project code on Github.

Before we can start the deployment process, make sure your React project is hosted on GitHub. If it’s not yet on GitHub, create a new repository and push your project. This is required before depolying the project using GitHub Pages.

I like to use npx create-react-app "project" to easily create a react project, as it offers a modern build setup with no configuration.

Step 2: Installing Github Pages Dependencies

In order to deploy your project, I use gh-pages, which is an npm package people can use to deploy to GitHub Pages. npm install gh-pages --save-dev