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:

• Cloudflare
• AWS Route 53

I had:

• A custom domain working through HTTP
• Custom sub-domains

<br><br>

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 christopherkade.com.

<br>

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:

<p align="center"> <img width="70%" height="70%" src="https://user-images.githubusercontent.com/15229355/33068859-7d471316-ceaa-11e7-930b-8c19b9e8f5fe.png"> </p>

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:

<p align="center"> <img width="70%" height="70%" src="https://user-images.githubusercontent.com/15229355/33068913-a9e7db12-ceaa-11e7-99b1-397f664c9be0.png"> </p> <br>

Enforcing HTTPS

Head out to the Crypto tab and change the SSL option to Full.

<p align="center"> <img width="90%" height="90%" src="https://user-images.githubusercontent.com/15229355/33068988-e7a1b7ac-ceaa-11e7-9e50-d8e34b34cb98.png"> </p>

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 https://christopherkade.com.

<br><br>

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:

<p align="center"> <img src="https://user-images.githubusercontent.com/15229355/33069025-0d14f102-ceab-11e7-8b5a-6edc83e02b44.png"> </p>

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 !).

<br><br>

Final thoughts

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,
@christo_kade