GitHub Pages in combination with Jekyll is a simple yet powerful tool to build and serve static websites.
However, by default you website will be located at username.github.io, e.g., http://balauue.github.io for this page. Generously, GitHub provides means to add a custom domain to your GitHub Page.
In the following I explain, how this works for user and organization pages. I assume you already have set-up your website.
Use a custom domain with GitHub Pages
First, have your domain registered at any domain registrar that allows you setting name server records and DNS zone files. Otherwise, this won’t work.
My domain provider is Gandi.net. The following steps consequently apply to Gandi, but are analogue for other providers.
Change your DNS zone file
If you want to use your apex domain aka root domain (e.g., https://rck.ms), you have to bend the
A records over to GitHub’s servers.
That means, remove all existing A records for the apex domain and instead have the following two lines in your zone file:
@ 10800 IN A 18.104.22.168 @ 10800 IN A 22.214.171.124
If you want to have a sub-domain (e.g., blog.rck.ms) pointing to your GitHub Page, you have to set a
CNAME record. For Gandi, the record would look like this:
blog 10800 IN CNAME balauue.github.io.
Now, tell GitHub the news. Add a file named
CNAMEto the root of your repository and put your custom domain in it. My file reads
That’s it. Wait for the new DNS records to propagate through the interwebs and a few hours later you website should be accessible under you custom domain.
Serve your website with HTTPS
Every website should do this. Your website too. Unfortunately, GitHub does not allow to upload a server certificate. Therefore, you will see certificate issues when opening your website with HTTPS, as custom-domain.com and *.github.io do not match.
There is a simple solution to that. CloudFlare offers SSL even in their free plan.
Get started by signing up at CloudFlare and setting it up for your custom domain (not the domain.github.io address). It fetches the DNS records. Make sure these match the ones defined previously (i.e., the A records points to GitHub respective the sub-domain CNAME record points to the GitHub page).
Now, CloudFlare presents you a primary and secondary name server. Set them for your domain at your domain provider to route your traffic through CloudFlare. Below you see my new configuration at Gandi.
Again, wait a few hours for the DNS changes to propagate until they are effective.
In the meantime, do some configuration at CloudFlare.
At the Crypto tab, set SSL (plus SPDY) to flexible. CloudFlare will generate a certificate and soon, your https://custom-domain.com requests will be valid!
Moreover, you might redirect your HTTP requests to HTTPS. At the Page Rules tab, create respective rules.
That’s all! You’re leveraging the power of GitHub Pages and Cloudflare for a simple, cloud-delivered website and blogging solution.