How to configure custom Namecheap domain to GitHub Pages

#github #namecheap #domain #personalwebsite

GitHub provides you the chance to host your website via username.github.io domain. But if you have a custom domain then you can also configure that with GitHub. Today, I'm about to show you how you can add your Namecheap domain to GitHub. If you have not any Namecheap domain then you certainly can have for free like I got. Just apply to GitHub student dev pack and grab one. Okay, first thing first. First you have to create an account in Namecheap. I am assuming that you already hosted your site in GitHub. Now, open your home page in Namecheap. You'll have a page like below.

Next, click manage to go to the next page. There, after scrolling a bit, you'll get a section like below. Select Namecheap BasicDNS from there.

In that page, at the top click to Advanced DNS tab. You will have some records field to add there. Click the Add New Record button and Add 5 records like the image below:

Select CNAME record in the first column of row 1 and select A Record for the rest. In column 3 of the first row(CNAME record), Instead of HabibRh26.github.io(which is my repo name where I hosted my site), use your's and select Automatic for column 4 entry. Next, you have to add 4 entries where you have to choose @ for column 2 entry, distinct IP address(for GitHub) for column 3 entry, and Automatic for the last column. Use the IP addresses same as to me or you can search in Google. Now, you are almost done. Just go to the GitHub Repo where you hosted your site. Select the settings tab at the top right keep scrolling until you find the box Custom domain. Just add your domain that you got from Namecheap. Don't forget to put www before the domain. So, It'd be like this for example- www.username.me. Click Save and Enforce HTTPS. Congratulations! You're done. Go to your domain URL and Enjoy!. Warning! It may take 24 hrs for GitHub to reflect the changes you've made. So, be patient. Be amazed at your personal site. 😁

Top comments (7)

hnaimm • Feb 11 '23

Vey helpful thank you.

It's worth noting that my github page link was username.github.io/repo_name/ and not username.github.io,
however the CNAME should be set the same way as mentioned in the article; CNAME -> username.github.io

The CNAME record should always point to <user>.github.io or <organization>.github.io, excluding the repository name. (Github Docs)

Nomanoff • Dec 26 '20

I also recently got a .me domain from my github student pack. However, I cant see anything on my dashboard. I checked my github and found that there was actually a new repo created with my chosen .me domain but why can't I see that on my namecheap dashboard??

Gordon Reeder • Aug 21 '20

I just remembered a problem I had when I set up my github web hosting. Your readers will run into it too.
When you set the Custom domain field in github settings, Github will create a file called CNAME. This will cause git to throw an error message when you try to do the next git push.
To deal with this:

Make sure that your local and remote (github) repositories are in sync before setting up the custom domain.
Once the domain is setup, do a git pull and merge to get the CNAME file into the local repository.
If you are using a static site generator, you need to figure out how to make sure CNAME gets recreated locally with each site build.

OK, so other that. It's really simple. Actually it still is simple. The CNAME file got me caught off guard when I did a custom domain setup. I don't want anyone else to have to deal with that.
Once you are aware of it, and handle it properly, you should be OK.