How to add a custom domain to github pages with namecheap

Wondering how you can set up your new domain from Namecheap.com with the wonderful GitHub Pages?

I thought I'd share the settings that worked for me and hopefully save you some time.

It's a pretty straightforward process, but it can be a little confusing at first, particularly if you are not yet adept with Namecheap or GitHub Pages.

Why should I use GitHub pages?

Websites that are hosted on GitHub pages load nice and quickly thanks to GitHub's infrastructure, and the hosting is free, and you can't argue with that. You can host personal, organisation, or project pages on GitHub. You can host sites that handle plenty of traffic too, for example, fontawesome.io runs on GitHub Pages.

How do I link my domain to GitHub pages from the Namecheap dashboard?

Step 1: Buy your lovely new domain from Namecheap. Once you’ve bought your domain, log in to your Namecheap dashboard, where you’ll find a list of all your domains. Click on the manage button on the domain you’re assigning to GitHub Pages, and then click the Advanced DNS tab. Next, click on Manage Your Host Records to add some tasty DNS records.

Add two A records pointing at GitHub pages

You want to map your domain name (www.yoursite.com) onto an IP address so that when visitors type in your domain name, their browser gets directed to the servers that host your website. We’re going to add two A records, with Host both set to @ The first one should point at 192.30.252.153 The second A record should point to 192.30.252.154 These IP addresses are the GitHub Pages servers.

Add a CNAME record

Next, we’ll add a CNAME record, with a www host set to:

yoursite.github.io

After that, you’ll want to switch off the preexisting URL Record with the type URL redirect. If you don’t switch this off, you may find that Chrome throws a Too many redirects error, while Safari doesn’t seem to care.

Create a text file called CNAME in your repository

In your repo, create a text file called CNAME (with no file extension) and insert your new domain name in there, without the www, so it looks like this:

yoursite.com

You can do this from within your repo locally, and push it to GitHub, or you can use the GitHub interface to create it.

Alternatively, create cname with the github interface

Go to your GitHub Page repo and click on Custom Domain.

In the input box, type the domain name you just bought to set your GitHub Page too, e.g. www.yourdomainname.com

You're done, now wait for DNS propagation

That's it. git push your repo to GitHub, give it a little while for the DNS to propagate through the internet, and then enjoy your new cheap and cheerful GitHub Pages site. While you're waiting for your DNS updates to propagate, you can check how the process is going using whatsmydns.net

If you're still having trouble, here's the documentation from GitHub. If you'd like to have a chat with me, you can send me a mail at donncha@focalise.ie.

I'm always interested to hear any feedback or suggestions for more tutorials. I'm also planning on producing lots of tutorials on YouTube, you can find the channel here. Topic requests are welcome. We can also help you with web design, SEO and web hosting.

Thanks for reading, and good luck with your new website!