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>.


Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more