Haarsh's Blog

How to deploy your React Websites on Github Pages.

How to deploy your React Websites on Github Pages.

Kumar Harsh's photo
Kumar Harsh
·

2 min read

If you have just started web development and are new to react world, then this will be really helpful for you.

Some info about the Github Pages:

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.

You can host your site on GitHub's github.io domain or your own custom domain.

Here are the prerequisites for this process:

  • Github Account
  • Git installed on your system
  • Node Js installed on your system
  • Any react app

Deployment on Github Pages

Step-1

Push your code to Github or Make sure that your code is already present in Github.

Step-2

Add Github Pages (gh-pages) as a Dev Dependency in your project.

Use the below command.

npm install gh-pages -save-dev

Step-3

Add Homepage property in the package.json file

“homepage”: “http://{Github-username}.github.io/{Github-repo-name}"

Example:

image.png

Step-4

Under the scrips section in package.json file add deploy and pre-deploy property.

“scripts”: {

“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
}

Example:

image.png

Step-5

Create a Git repository or initialize an empty git repository in remote

For initializing an empty git repository

git init

Add it as a remote

 git remote add origin your-github-repository-url.git

Example:

git remote add origin haarsh24/react.git

Step-6

Deploy it to Github Pages

npm run build

Step-7

Now go to your domain that you have defined in your homepage section Your Website is now live Check it here 

http://{Github-username}.github.io/{Github-repo-name}

Blogs written with ❤️ by Harsh

GitHubgithub-actionsReactdeploymentWeb Development