Using Subdomain of your Website for your Github Pages Project

It took me a few hours of tinkering to finally figure out how to do it, so I thought I’d write a post about it for future me or anyone who stumbles through here looking for a solution. It actually is quite simple.

My domain is hosted with Namecheap so the post will be more specific to it, but it shouldn’t be too different even if you have your domain elsewhere. This post assumes that you’ve already set up Github Pages to demo your project. If you’re not sure how, here’s a blog post that I wrote that may help.

Now that we’ve gotten the preliminaries out of the way, let’s begin!

First, make sure that you go to your Github repo’s Settings page. Scroll down to the “Github Pages” section and enter the address of the subdomain which will show your project. Like below:

In this screenshot, I’ve entered my Custom Domain as tinygallery.tenzinggaychey.com

The next step is to go to your domain provider, and make sure to add the following to your host record, mine being Namecheap. To be able to do so on Namecheap, you will have to select “Namecheap BasicDNS” in your Manage Domain page in the “Nameservers” section, as shown below.

Once that is done, follow this article to make sure your domain is linked to your hosting server on Namecheap. It may take some time for your site to show up since there is some domain propagation going on. They say 24-48 hours, but I haven’t once waited more than 15 to 20 mins for it to work. Once done, add another record with the following details.

The type should be set to CNAME. The host should be set to whatever subdomain you entered in the Github Settings page just by itself. The value should be set to “your-github-username.github.io.” This will always be the value even if you have multiple project pages. Github will automatically link it to the correct project repo. Note: That trailing period is not a typo. You need that there. Also, you don’t need to put http://

As you can see, I’ve already linked my “multitodo” project to my Github project page.

Now all I did was go to “tinygallery.tenzinggaychey.com” in my browser and voila, we’re done!


Side note: In case your app doesn’t work when you go to the subdomain link, you may have to go to your package.json file in your project and change the homepage property to your new subdomain url and redeploy.

A big thank you to the person who asked and answered this question on Stack Overflow.

Leave a Reply

Your email address will not be published. Required fields are marked *