Skip to content

Instantly share code, notes, and snippets.

@WganMe
Created August 17, 2016 07:45
Show Gist options
  • Save WganMe/c53f47f3940fc75e45a8b4f34c12f174 to your computer and use it in GitHub Desktop.
Save WganMe/c53f47f3940fc75e45a8b4f34c12f174 to your computer and use it in GitHub Desktop.
Set Up SSL on Github Pages With Custom Domains for Free
#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)
#Sign up for Cloudflare if you don’t already have an account
#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
#Go to your Domain Registrar’s website and change the Domain Name Servers to those Cloudflare provides you with
#Finish Setting up your Domain on Cloudflare and go to the Domain Dashboard
#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:
#1
#2
#3
#4
#5
#6
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>:
#1
<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
#Add this script to the very top of your <head>:
#1
#2
#3
#4
#5
<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:
#1
#2
#3
#4
#5
<!-- 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">
@manthanpatel12
Copy link

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment