Favour Adedapo's Blog

Using GitHub Pages to deploy your Static or React Project.

Using GitHub Pages to deploy your Static or React Project.

Favour Adedapo's photo
Favour Adedapo
·

2 min read

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.

It was created by GitHub to allow developers to host their projects directly from a GitHub repository without having to pay for domain cost.

You can publish a website about to https://<username>.github.io and your project to https://<username>.github.io/{your-project-name}.

The purpose of this article is to guide you through publishing your project with gh-pages whether it is a plain HTML, CSS & JavaScript project or it is built with React xD.

Plain HTML, CSS & JS

  1. If your website contains images make sure that they are not stored in a media folder as gh-pages doesn't parse relative imports well. You may have to upload your images to a service like Cloudinary.

  2. With that out of the way, navigate to your repository settings and locating the GitHub Pages section image

  3. Select the master branch from the drop-down menu and this triggers a refresh. image

  4. When the page is done refreshing, navigate back to the GitHub Pages section and it should be active with the URL to the live project active. image

Note that because of this setting each commit you make to the master branch updates the live project too.

React Project.

  1. Install gh-pages by running npm install gh-pages or yarn add gh-pages

    This package creates a gh-pages branch that would hold the build files to host your project.

  2. In your package.json file add the following line 

    "homepage": "https://<username>.github.io/<repo-name>",

    Note that the repo name can be anything not necessarily generic.

  3. Also, update your scripts to contain 

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

    The predeploy command generates a build that is ready to be published while the deploy command generates a build then deploys it.

  4. When you are ready run 

    npm run deploy

    Wait for it to finish deploying the site and check the URL you set as homepage in your package.json to view it.

Note

If you get the error fatal: A branch named 'gh-pages' already exists. run 

rm -rf node_modules/gh-pages/.cache

that clears the cache for you and rerun the deploy command.

For more information about GitHub pages docs.github.com/en/github/working-with-gith..

GitHubReactstaticdeployment