shopify analytics

How to use Github Pages with custom domain

Github lets you transform (part of) your repository into a website with a domain format like this : {username}.github.io/{repo-name} .

You can also use your own domain name (eg. www.myawesomeproject.com) to link with the repository pages.

Prerequisite

This post assume you already bought/own the domain name you want to use and have access to the domain name registrar DNS setting.

Step 0 - Enable Github Pages

Go to your repository setting tab,
setting tab of repository

Scroll down to Github Pages section and choose the branch you want to turn into website, and click Save.
choose branch used for github pages

Now your Github Pages URL will be like this : {username}.github.io/{repo-name} .

Step 1 - Enable Custom Domain

Scroll down further in the Github Pages setting and type in your custom domain, you can use a subdomain too. Do note that after clicking Save, Github will create a new commit adding a CNAME file to the root of your repository for the branch used.
enable custom domain name for github pages

Step 2 - Add DNS Record

For Root Domain - Add A Record on your domain DNS setting

For root / apex domain name (eg: myawesomeproject.com), go to your DNS setting in your domain name registrar control panel, and add two A record pointing to Github IP. For the first A record, in hostname type "@", and for the destination/direct to, enter "192.30.252.153". For the second one, type "@" for hostname and "192.30.252.154" for destination.

A record pointing to Github IP 1

A record pointing to Github IP 2

For Subdomain - Add CNAME record on your domain DNS setting

For subdomain name (eg: myawesomeproject.myname.com), go to your DNS setting in your domain name registrar control panel, and add one CNAME record pointing to the original URL of your Github Pages without the project name at behind (eg: your-username.github.io).

Type the subdomain name you want in the hostname field and the URL of the Github Pages without the repository name (eg: your-username.github.io) into the alias field.

CNAME record pointing to the Github Repository

Step 3 - Wait 😔

As DNS changes usually take between 12-48 hours to propagate to different ISP, you might need to wait a while to be able to access the domain name you used in previous step.

You can see the example repository used got Github Pages here : Github Pages Repository Demo . You can access the pages here : http://githubpagesdemo.littlefox.es/.

Axel

Read more posts by this author.