DEV Community

Cover image for Free Hosting Using Github pages
Ram
Ram

Posted on

Free Hosting Using Github pages

Hosting a React App on GitHub Pages

In this guide, I'll walk you through the steps to host your React app on GitHub Pages.

Step 1: Create a GitHub Repository

  1. Go to GitHub and create a new repository.
  2. Name the repository (e.g., my-react-app).
  3. Optionally, initialize the repository with a README.md file.

Step 2: Install gh-pages

Navigate to your React app's directory and install the gh-pages package:

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

Step 3: Update package.json

Open your package.json file and make the following changes:

Add a homepage Field

At the top of your package.json, add:

"homepage": "https://<your-username>.github.io<your-repository-name>"
Enter fullscreen mode Exit fullscreen mode

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

Add Deployment Scripts

Add the following scripts to the scripts section of package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
Enter fullscreen mode Exit fullscreen mode
  • predeploy: Automatically runs npm run build before deploying.
  • deploy: Deploys the contents of the build directory to the gh-pages branch.

Step 4: Build and Deploy

Run the following command to build and deploy your app:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

This command creates a production build of your app and pushes it to a gh-pages branch in your repository.

Step 5: Configure GitHub Pages

  1. Go to your repository on GitHub.
  2. Click on the "Settings" tab.
  3. Scroll down to the "GitHub Pages" section.
  4. Under "Branch," select gh-pages.

Your React app should now be live on GitHub Pages at https://<your-username>.github.io/<your-repository-name>.


Top comments (0)