There are two simple ways to deploy your react apps on GitHub Pages. The simple way is to use gh-pages package which does most of the work for you it handles all the configs and other details. Another way is the manual way where you do all the work by yourself. for this post we’ll be seeing how to do it using gh-pages

Using gh-pages

Install the package on your local dev environment.

yarn add -D gh-pages

you can also you other package manager such as NPM.

Add these commands under scripts in package.json

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

You can use npm or other equivalent commands related to different package managers

Update vite.js.config

• If you are deploying to https://<USERNAME>.github.io/, or to a custom domain through GitHub Pages (e.g. www.example.com), set base to '/'. Alternatively, you can remove base from the configuration, as it defaults to '/'.

    export default defineConfig({
      base: "/",
      plugins: [react()],
    })
  

• If you are deploying to https://<USERNAME>.github.io/<REPO>/ (eg. your repository is at https://github.com/<USERNAME>/<REPO>), then set base to '/<REPO>/'.

    export default defineConfig({
      base: "/portfolio-site/", // portfolio-site is the name of my repo
      plugins: [react()],
    })
  

Run the command to deploy

yarn run deploy

You can use npm or other equivalent commands related to different package managers. This command will build your project and create a new branch called gh-pages in your git repository and push it on GitHub and it will also handle the configuration required to deploy your project.

This is it! Congratulations🎉🎉🎉 your static site will be deployed, to check you can go to your repository’s setting and go in the pages section

Setting custom domain for your

The first thing to do is buy a domain of you choice. you can buy it from GoDaddy Hostinger etc. It’s a very straight forward process you go to their site add domains to your cart and checkout just like any other ecommerce site.

Now for GitHub pages we can set two types of domains

• Apex domain

  e.g.: troncodes.com

• Subdomain

  e.g.: www.troncodes.com or blog.troncodes.com

To point your apex domain to your GitHub page simply go to your domain’s DNS settings on your domain provider’s site. if you can’t find it, a simple google search will help you figure it out. once you get into your domain’s DNS setting you will see a similar table to this.

But you will not have all these A records which you see in the above picture if you have not already set them. the IP’s which you see are of GitHub’s public servers which hosts your page. They are provided by GitHub.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Add four A records as I have added above in your Domain’s DNS setting use the above mentioned IP’s and keep rest of the setting exactly as shown above. What this does is whenever any look up is done for your domain the request will be sent to GitHub’s servers which than will respond back with the content of your GitHub page.

Now the DNS servers knows to forward any requests looking up for your domain should be forwarded to GitHub but GitHub does not know what it should do with this request. So we need to configure that as well.

Configuring GitHub Repo

go to repository settings and navigate to pages just like before. scroll down to see and you’ll see a section for custom domain. Enter the name of your domain, save and you are done.

wait for some time and refresh the page. you’ll see a link which points to your website. Congratulations🎉🎉🎉 your website will now be displayed on your custom domain.

Setting up a sub domain

GitHub recommends also setting up a www subdomain. If you configure the correct records for each domain type through your DNS provider, GitHub Pages will automatically create redirects between the domains. For example, if you configure www.example.com as the custom domain for your site, and you have GitHub Pages DNS records set up for the apex and www domains, then example.com will redirect to www.example.com. Note that automatic redirects only apply to the www subdomain. Automatic redirects do not apply to any other subdomains, such as blog

To set up a subdomain subdomain you just have to add a C record in your DNS setting with the following settings.

www is value of your subdomain and this time instead of using IP’s we give this link yourUserName.github.io that’s it. Don't forget to replace yourUserName with your own user name or organization name.