# GitHub Pages for React: Vite Deployment and Custom Domain Configuration

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.

```bash
yarn add -D gh-pages
```

you can also you other package manager such as NPM.

### Add these commands under scripts in `package.json`

```bash
"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/`](http://github.io/), or to a custom domain through GitHub Pages (e.g. [`www.example.com`](http://www.example.com)), set `base` to `'/'`. Alternatively, you can remove `base` from the configuration, as it defaults to `'/'`.
    
    ```jsx
    export default defineConfig({
      base: "/",
      plugins: [react()],
    })
    ```
    
* If you are deploying to `https://<USERNAME>.`[`github.io/<REPO>/`](http://github.io/<REPO>/) (eg. your repository is at [`https://github.com/<USERNAME>/<REPO>`](https://github.com/<USERNAME>/<REPO>)), then set `base` to `'/<REPO>/'`.
    
    ```bash
    export default defineConfig({
      base: "/portfolio-site/", // portfolio-site is the name of my repo
      plugins: [react()],
    })
    ```
    

### Run the command to deploy

```bash
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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703327658735/0ee22923-51e9-4f57-8ef5-23c076211b76.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">check the <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://vitejs.dev/guide/static-deploy" style="pointer-events: none">Vite Docs</a> for more details</div>
</div>

## Setting custom domain for your

The first thing to do is buy a domain of you choice. you can buy it from [GoDaddy](https://www.godaddy.com/) [Hostinger](https://www.hostinger.in/) 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](http://troncodes.com)
    
* **Subdomain**
    
    e.g.: [www.troncodes.com](http://troncodes.com) or [blog.troncodes.com](http://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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703328063974/1a7433f4-036d-434c-becc-623b93e6189d.png align="center")

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.

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703328376452/1c7a5239-2183-430a-b87b-ce42c9aee5ad.png align="center")

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.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">if you want to know more details about it checkout <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain-and-the-www-subdomain-variant" style="pointer-events: none">GitHub Docs</a> for the same</div>
</div>

### 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](http://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](http://example.com) will redirect to [www.example.com](http://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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703328580628/252c5412-6917-40fc-b76f-4668ab3aa91d.png align="center")

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

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">if you want to know more details about it checkout <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain-and-the-www-subdomain-variant" style="pointer-events: none">GitHub Docs</a> for the same</div>
</div>