How to host static website with SSL for free

Most of my small sites — Daily Photography Assignments, Bonobo Git Server or our travel blog — are static websites generated by nanoc, and even this blog is a static website.

Until quite recently, all of them were hosted on a small server and deployed via FTP, a.k.a. the ’90s way. The biggest pain with FTP is the time it takes to deploy large number of files, especially if you live in New Zealand and your server is not there. That’s when the latency kicks in and there is no way to upload just the files that has changed.

Github pages

I use git to version the content of all the sites, that’s one of the greatest benefits of static websites. And Github has a Github Pages – a service where you can host your HTML sites and publish them with git.

There are two types of pages: user and project. You can have one user website and multiple project ones. I use the user one for my personal blog and the project ones for everything else. The difference between the two of them is mainly in URL:

username.github.io for user page and
username.github.io/projectname project pages.

Also, the way you publish content slightly differs. For user page you need to have a separate repository named username.github.io and for project pages you only create a branch called gh-pages inside your current repository.

So far so good, when you make some changes to your site you push the changes with git. In nanoc you setup your output folder to be a git repository with appropriate remote and push changes to the server.

Adding custom domain to github pages

When you have your site up and running on github pages, we can set it up for your custom domain. To do this, you need to add a file called CNAME to your repository with your domain name. So the content of the file should look like the following.

domain.com

After that, you change your DNS records at your domain provider to Github servers.

Type   Name             Value
A      domain.com       192.30.252.153
A      domain.com       192.30.252.154
CNAME  *                alias of domain.com

And you are done. Now your domain uses github pages as a hosting providers.

HTTPS support with CloudFlare

Google ranks HTTPS sites higher, so it would be really cool to add SSL support to our domain. We don’t control the server on Github and there is no way to add a custom certificate for a page there. I really like the git deployment though, so I digged deeper and found an amazing service called CloudFlare.

It gives you couple services on top of your website like caching, CDN, analytics and most importantly SSL support. The setup is pretty straightforward, you create an account, add the domains that you are interested in and it will automatically setup a DNS records and tell you to change nameservers to the following values.

1. henry.ns.cloudflare.com
2. kia.ns.cloudflare.com
3. Remove this nameserver
4. Remove this nameserver

I can’t change nameservers myself with my domain registrator and I had to write an email to the tech support, but most of the big ones allow you to change it in the administrator application.

For enabling SSL you have to select Flexi SSL option under security. CloudFlare will generate a certificate for you and the whole process might take up to 24 hours. Also, be prepared on some cached data and flush your DNS in case of any troubles as I ran into some issues with stale records on my local ISP network.

Now, when your HTTPS site is working you have to do a few last modifications. Firstly all resources must come from SSL protected sites. So if you are using Google fonts for example, they need to come from HTTPS. Most of the CDNs supports both.

change

<link href='http://fonts.googleapis.com/css?family=Lato:300,700,300italic' rel='stylesheet' type='text/css'>

to

<link href='//fonts.googleapis.com/css?family=Lato:300,700,300italic' rel='stylesheet' type='text/css'>

The last thing is to force all the traffic and legacy links to your new HTTPS address. To do so, we are doing to setup a page rule at CloudFlare. Go to Page Rules and add a new rule for http://*domain.com/*. Tick forwarding and set to following.

Forwarding      https://$1domain.com/$2
Forward type    Permanent - 301

Change all the links on your website to point to https:// URL and you are done. Your site is protected by SSL and hosted on Github pages and all the old links are redirected to the secure site.

One last thing to keep in mind is that the traffic from CloudFlare to Github servers is not protected by SSL, so I recommend not to use this approach for any sensitive data, but it is fine for serving static data with all the benefits you are getting from SSL.