This post is about setting up custom domain names when your site is hosted on GitHub Pages. It’s apparently off-topic on a blog about React Native but I was just surprised by the lack of proper step-by-step guides even on GitHub itself.
- Host a website (e.g. this blog) on GitHub Pages (well, it’s free and working great, who can resist that!).
- Instead of the
github.iodomain, I’d like to use my own domain name:
- By default, I’d like to use the
wwwsubdomain and redirect the “naked” domain to the
wwwsubdomain, that is:
http://reactnativediary.com ==> http://www.reactnativediary.com. This is because GitHub strongly recommends the use of
- It gives your GitHub Pages site the benefit of our Content Delivery Network.
- It is more stable because it is not affected by changes to the IP addresses of GitHub’s servers.
- Pages will load significantly faster because Denial of Service attack protection can be implemented more efficiently.
Below I’m going to use this blog
reactnativediary.com as an example, but of course you can replace it with the info and domain of your own site:
- First of all, create a public repo on GitHub named
react-native-diary-blog. On its
gh-pagesbranch, make sure all the site content is there.
gh-pagesbranch, create a file named
CNAMEwith only one line
www.reactnativediary.com. Note, this file can only include one domain, don’t put multiple domain names here. If you’d like to support multiple domains, you probably want to set up 301 redirects on other domains.
- On your DNS provider’s site, create a
www ==> lintonye.github.io
Of course, the value of your record should be
YOUR-GITHUB-USERNAME.github.io. See more details here.
4. On your DNS provider’s site, create two
A records for both
www 18.104.22.168 www 22.214.171.124 reactnativediary.com 126.96.36.199 reactnativediary.com 188.8.131.52
NOTE: If your DNS provider supports
ANAME records instead of
A records, see [GitHub’s doc] for details. I don’t personally have any experience in this yet.
It’ll take a while (in my case a couple of hours) for the DNS setting to take effect. When everything is set up properly, you should be able to see this in the repo’s settings:
This is it. After this setup, GitHub should be able to automatically redirect the “naked” domain (
reactnativediary.com) to the
www subdomain. Hopefully you’ll find it more useful than GitHub’s this, this, or this pages.