Adding SSL to gh-pages

Zachary Newton Avatar by Zachary Newton
on May 20, 2017

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


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

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

To get started:

  1. Sign in to Cloudflare and click “+ Add Site”.
  2. Type your domain/domains into the given field and click “Begin Scan”.
  3. After Cloudflare scans the domain, click “Continue Setup”.
  4. Verify that all of your DNS settings are listed and match what you have on your domain registrar's DNS settings, then click “Continue”.
  5. 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.
  6. 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.
  7. 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.
  8. Go ahead and change “Full” to “Flexible”.
Logging into Cloudflare

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.

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

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

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="">

  <!-- to this -->
  <link rel="stylesheet" href="//">

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.

You Might Want To Read...
Life Should I be Writing?

Should I be writing? That is a question that I have asked myself time and time again.

Life My Addiction to Knowledge?

I have a problem. Whenever I start a project or whenever I am informed of one that people wish to bring me on board with, my addiction kicks in.

GitHub Adding SSL to gh-pages

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