Serving your Github pages custom domain using HTTPS
After deploying my new web-tool (namely Snippet) I figured it would be time to finally add SSL to my domain. Even though no data leaves or enters my website, I find the green lock of trust to be reassuring and a norm on the web, and so do most users today.
I started by only using AWS services, but then realized I could cut some costs by using Cloudflare's free plan.
In short, I needed:
- AWS Route 53
- A custom domain working through HTTP
- Custom sub-domains
Step 1: Setting up Cloudflare
We'll be using Cloudflare as our new DNS (coming from AWS Route 53), to use and force HTTPS.
To do so, head out to Cloudflare's website, create an account and set up your website by providing your domain; in my case
Using Cloudflare as our DNS
Cloudflare will then scan your existing DNS configurations and display the records they found, in my case, they found most of them, namely my
A records and one of my sub-domain's
CNAME record, like such:
I then proceeded to add the missing records and most importantly to add a
CNAME record with
www as its name and an alias to
username.github.io as its value. This way, when navigating to
www.christopherkade.com, you'll be redirected right away to
christopherkade.github.io. Here's the final records:
Head out to the Crypto tab and change the
SSL option to
We now want to make sure our website is only accessible via HTTPS, to do so go to the Page Rules tab and add the following rule:<p align="center"> <img width="100%" height="100%" src="https://user-images.githubusercontent.com/15229355/33068253-8eef832a-cea8-11e7-823f-785e514782f7.png"> </p>
This way, accessing
http://christopherkade.com will always forward our user to
Step 2: Changing our nameservers
Now that this is all said and done, when navigating to your overview page, Cloudflare should be asking you the following:
Please ensure your website is using the nameservers provided: - nameserver - nameserver
This is pretty straight forward, we need to head out to AWS Route 53 and change our domain's nameservers.
To do so, go to the
Registered domains tab on the left:
Click on your domain of choice, then click on
Add or edit name servers on the right side of the panel. You can now provide the nameservers given to you by Cloudflare previously. This change will take a couple of minutes, you will then receive an e-mail by AWS confirming it.
Now that your nameservers have been changed, go back to Cloudflare's overview panel and click on
Recheck Nameservers (you may do that only once per hour, if you have already done it earlier out of curiosity, patience !).
A short while after, you will receive an e-mail from the Cloudflare team confirming your submission ! Just wait some time, hard refresh your website (Ctrl + f5 on Chrome, Ctrl + R on Firefox) and voilà, you now have your beautiful green lock of trust (on all sub-domains as well !).
Serving through HTTPS is a norm nowadays, and even though Github pages serves as HTTPS by default for non-custom domains, I found it useful to learn how to do it in all cases.
It took a lot of research to intertwine these two services, and I hope this post may be of use to at least one of you.
Thanks for reading,