Zachary R Newton

If you are a good web developer and you care about your users, you should have SSL on your website.

“A GOOD DEVELOPER CARES ABOUT SECURITY.”

With GitHub being such a great option to host some small projects, websites, and blogs for free, wouldn’t it be nice if we could have that lovely HTTPS up in the search bar? Well for those lame people who just decide to use the default username.github.io/repository URL that GitHub provides, your job is already done. Congratulations! You already have SSL setup on your website.

Unfortunately, for us cool people who prefer having a custom domain on our websites, life's a little harder — but it’s still free.

I am assuming you already have your GH-Pages hosted website with a custom domain set up. If you don’t know how to add a custom domain to your GH-Pages, go read this!

Before you get started, there are a few things you need.

A Cloudflare account if you don’t already have one (it’s free, so do it).
Your website hosted with GH-Pages.
Access to your domain registrar so you can adjust your DNS (domain name servers).
A few moments of patience.

If you really have no patience though, you can watch this video instead of reading the rest of these instructions.

To get started:

Sign in to Cloudflare and click “+ Add Site”.
Type your domain/domains into the given field and click “Begin Scan”.
After Cloudflare scans the domain, click “Continue Setup”.
Verify that all of your DNS settings are listed and match what you have on your domain registrar's DNS settings, then click “Continue”.
Now you get to select a plan, wooh! You should select the free plan unless you feel that you need to pay for more options. Oh, then click “Continue” again.
Cloudflare will show you what your current Nameservers (in your registrar's DNS settings) are and what you need to change them to. Once you have changed them, come back to Cloudflare and click “Continue” yet again.
Scroll down to the “Domain Summary” section of the overview page that Cloudflare gives you for your website. Click on your SSL setting, it will probably say something like “SSL: Full”, you’re going to want to click whatever word is in blue.
Go ahead and change “Full” to “Flexible”.

Congratulations, you have made it halfway! You should probably take a little break here, you have worked hard to get to this point. Plus it could take up to a few hours (or up to 24 hours if you are an extremely unlucky person) for your website to be active on Cloudflare and accessible with the https protocol.

Here comes the important stuff. We need to tell those great search engines and make our visitors use the SSL version of our site.

To get finished:

Because GH-Pages is powered by Jekyll, you should have a “_config.yml” file in the root of your repository. If you don’t, it’s okay, just go and add a “_config.yml” file to the root of your repository.

Add these two lines in your “_config.yml” file replacing “yoursite.com” with your domain name.

url: https://yoursite.com
enforce_ssl: yoursite.com

Add this bit in the <head> tag of your site.

<link rel="canonical" href="{{ site.url }}{{ page.url }}" />

All of that is going to let all those search engines that there is an SSL version of your website. Now you just need to redirect your visitors to the more secure version of your website.

Add this script to your <head> tag again replacing "yoursite.com" with your domain name.

  <script type="text/javascript">
    var host = "yoursite.com";
    if ((host == window.location.host) && (window.location.protocol != "https:"))
      window.location.protocol = "https";
  </script>

You did it! You now have your visitors using the SSL version of your site!

If all of the styles/scripts from your website just disappeared, try removing the protocol from your links all together like this.

  <!-- from this -->
  <link rel="stylesheet" href="http://yoursite.com/path/to/yourstyles.css">

  <!-- to this -->
  <link rel="stylesheet" href="//yoursite.com/path/to/yourstyles.css">

It's better practice to write your links without the protocol anyways.

If I missed anything, or if anything has changed since I wrote this, tweet me and I will come back and update this tutorial.

Adding SSL to gh-pages

Before you get started, there are a few things you need.

To get started:

To get finished:

You Might Want To Read...