Use your own domain on GitHub pages

This post explains how to use your own domain for a site hosted on GitHub pages. It takes you through the simple steps you need to take to replace your-repo-name.github.io with your-domain.name.

For example, I replaced bybritton.github.io with bybritton.co.uk.

Do you use GitHub Pages to host your (static) site?

If not, you really should consider it. It is great. It takes the hassle out of “deploying” your site or changes to your site. You push to GitHub or edit a file directly on GitHub, and then the rest is taken care of.

It is perfect for informational sites, sites that are content only. Think project sites, personal blogs, that sort of thing.

Use your own domain

Before we start, you need a site hosted on GitHub pages and your own domain.

If you don’t own a domain then you need to buy one first. I use 123Reg, but you can use any provider that sells domains.

GitHub settings

First, go to the repository on GitHub.

Then, click on “Settings” in the horizontal menu bar.

Next, select “Pages” from the sidebar on the left. At this point, your site should be available at <your-repo-name>.github.io.

On this page, find the “Custom domain” section. Then, enter your domain into the text box and save.

You should tick the Enforce HTTPS checkbox. If it is not available, then configure the DNS stuff first and then go back to this page.

Configure the DNS

You will be able to change some DNS settings with your domain provider. What you need to do should be the same, whoever the provider is, but the interface might look a bit different.

Log into your account (with your domain provider). Then, pick the domain you want to use and find a “DNS settings” or “DNS configure” option.

In 123Reg it looks like this.

You then need to find the bit where you can enter some DNS records. In 123Reg it is under “Advanced DNS”.

There are 2 things we need to set.

First, add 4 A records. Each one should point to one of these 4 destination IP addresses. GitHub provides these and they are:

• 185.199.108.153
• 185.199.109.153
• 185.199.110.153
• 185.199.111.153

Once added, you will end up with 4 entries or records. They will look like this.

DNS Entry	Type	Destination / Target
@	A	185.199.108.153
@	A	185.199.109.153
@	A	185.199.110.153
@	A	185.199.111.153

You then need to set up a CNAME record. Adding this means users won’t need to enter www. to visit your site.

This means instead of www.yoursite.com they’ll be able to visit yoursite.com which is a bit cleaner.

The destination or target for the CNAME record should be the original GitHub pages URL, for example your-repo.github.io.

And the DNS Entry for the CNAME record should be www.

For example, the entry should look like this

DNS Entry	Type	Destination / Target
www	CNAME	bybritton.github.io

Check it is working

Once you’ve followed the steps above it is worth checking everything is working.

Bear in mind it may take a few minutes for everything to filter through the system. Hopefully, it’ll all happen pretty quickly. But it might be worth having a tea break at this point.

You can check things are working in two ways.

Firstly, you can revisit the GitHub>Repo>Settings>Pages page. There are 2 things to look for:

1. A box saying “Your site is live at …”. This should now say your domain. For example

2. Under Custom domain, you will see a flag saying “DNS Check in Progress”, this will eventually change to a green tick saying “DNS check successful”. Note, every time you visit this page the check will be performed.

A second way to check things is via the commandline. Enter

dig EXAMPLE.COM +noall +answer -t A

If everything is set up correctly then this command should return 4 results. For example

bybritton.co.uk.	14400	IN	A	185.199.110.153
bybritton.co.uk.	14400	IN	A	185.199.109.153
bybritton.co.uk.	14400	IN	A	185.199.111.153
bybritton.co.uk.	14400	IN	A	185.199.108.153

Hopefully, your site is now being served from your own domain 🚀

Things to be aware of

There are a couple of things worth being aware of. These are:

• GitHub Pages provision the security certificates to make it possible to serve over HTTPS. Sometimes when you visit the Settings→Pages page an information box will appear saying TLS certificate is being provisioned. No need to worry about this. GitHub will let you know if there is a problem.
• A yellow box might appear on the GitHub>Repo>Settings>Pages page saying something about the DNS configuration – especially the www bit. Don’t worry about this for the first day or so. It takes a little time for everything to sort itself out.
• The GitHub Pages documentation goes into a lot more technical detail. I’d recommend using it to troubleshoot any issues you have.

Is there anything else we need to be aware of when using GitHub Pages? If so, please let me know in the comments and I’ll add it here. Thanks.