Sheharyar Naseer

Set up SSL on Github Pages with Custom Domains for Free

Updated:

I came across this post Setting up SSL on Github Pages and wanted to try it out, but since my website set-up is a bit different than Keanu’s I had to go through a slightly different route. One reason being that this website is hosted on the apex (root) domain i.e. without www. This guide is focused towards an Octopress blog with a Custom Domain hosted through Github Pages, but this should work for Jekyll Static Sites as well.

Getting Started

(Almost the same as Keanu’s points)

  1. Sign up for Cloudflare if you don’t already have an account
  2. Add your website, and make sure all automatically generated records match those on your registrar’s website
    • If you already have a gh-pages website and are simply moving to https, you don’t need to do anything else
    • If not, and are trying to set up your site at apex, create an A record pointing to Github’s IP addresses, else a CNAME pointing to your-username.github.io
    • Make sure there’s a CNAME file at the root of your gh-pages repo with your domain name
  3. Go to your Domain Registrar’s website and change the Domain Name Servers to those Cloudflare provides you with
  4. Finish Setting up your Domain on Cloudflare and go to the Domain Dashboard
  5. Open the “Cloudflare Settings” for your domain, and change the SSL Setting to “Flexible SSL”

After a couple of hours, you’ll be able to open yoursite.com with https. But now comes the important part, letting search engines know and making your users use the SSL version.

Letting Search Engines know

In your _config.yml, add these:

url: https://www.yoursite.com   # with the https protocol
enforce_ssl: www.yoursite.com   # without any protocol

# For example, my configuration is this:
url: https://sheharyar.me
enforce_ssl: sheharyar.me

Make sure you have a canonical link in your <head>:

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

If you’re on Octopress, then you probably already have the cooler version that creates beautiful canonical links.

Redirect users to https

Updated Solution

You can ignore the original solution below, as Cloudflare now lets you redirect all http traffic to https easily and without using page rules:

  1. Open your domain in Cloudflare
  2. Select SSL/TLS → Edge Certificates
  3. Enable “Always Use HTTPS”

Original Solution

Since you’re already using Cloudflare, you can make use of their Page Rules feature to redirect users to https. For that, do the following:

  1. Open your domain in Cloudflare
  2. Go to Rules → Page Rules
  3. Create a new Page Rule
  4. Under URL, write: http://yoursite.com/*
  5. In the Settings dropdown, select “Forwarding URL”
  6. Choose “Permanent” or “Temporary” redirect depending on your needs
  7. In the Destination URL, write: https://yoursite.com/$1
  8. Save, and you’re good to go!

Optionally, you may add this script to the very top of your <head> if you don’t to proxy the website requests through cloudflare or have already reached your free page rule limit:

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

Issues?

If you find some stylesheets/scripts missing, make sure that you’re using the new https paths for your resources. A better option would be to not use the protocol at all:

<!-- Change this -->
<link rel="stylesheet" href="http://www.somesite.com/path/to/styles.css">

<!-- to this: -->
<link rel="stylesheet" href="//www.somesite.com/path/to/styles.css">

More Resources & Examples:


Have something to add? Tweet to me @sheharyarn