hosting react on gh pages

Hosting React on GitHub Pages

If you are looking for a free and easy way to host your React application, then GitHub Pages is a great option. GitHub Pages is a static site hosting service that allows you to publish your static web pages directly from a GitHub repository for free. In this guide, we will walk you through the steps to host your React application on GitHub Pages.

Step 1: Create a New Repository

The first step is to create a new repository on GitHub. To do this, log in to your GitHub account and click on the "New" button in the top-left corner of your dashboard. Give your repository a name and make it public so that everyone can access it. Then, click on the "Create repository" button.

Step 2: Clone the Repository

Once you have created the repository, you need to clone it to your local machine using Git. Open your terminal and run the following command:

git clone https://github.com/username/repository-name.git

Replace "username" with your GitHub username and "repository-name" with the name of your repository. This will create a new folder in your current directory with the same name as your repository.

Step 3: Create a React App

If you have not already done so, create a new React application using the command:

npx create-react-app my-app

This will create a new folder called "my-app" with all the necessary files and folders for a basic React application.

Step 4: Build the React App

Next, you need to build your React application for production using the following command:

npm run build

This will create a new folder called "build" in your React application's directory with all the production-ready files.

Step 5: Configure the GitHub Pages Settings

Now that you have built your React application, you need to tell GitHub Pages to use it as the source for your site. To do this, create a new file in the root of your repository called "gh-pages" with the following content:

{"homepage": "https://username.github.io/repository-name/"}

Replace "username" with your GitHub username and "repository-name" with the name of your repository.

Step 6: Deploy Your React App

The final step is to deploy your React application to GitHub Pages using the following commands:

npm install --save-dev gh-pages

npm run deploy

This will create a new branch in your repository called "gh-pages" with all the production-ready files from the "build" folder. Your React application is now live on GitHub Pages at the following URL:

https://username.github.io/repository-name/

Alternate Method

Another way to host your React application on GitHub Pages is to use a tool called "gh-pages". This tool allows you to deploy your React application with just one command. To do this, first install the "gh-pages" package using the command:

npm install --save-dev gh-pages

Then, add the following scripts to your package.json file:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Finally, deploy your React application to GitHub Pages using the command:

npm run deploy

This will create a new branch in your repository called "gh-pages" with all the production-ready files from the "build" folder. Your React application is now live on GitHub Pages at the following URL:

https://username.github.io/repository-name/