HTTPS using CloudFlare and GitHub Pages

GitHub pages is a great static-site hosting resource but if you want to use it with a custom domain name and support HTTPS then you need to take some extra steps. You could use the new Let’s Encrypt support for custom domains on GitHub pages. However, you can also use Cloudflare to add HTTPS support to your pages if you use your own domain name and want more flexibility, here’s how.

The GitHub pages servers do support TLS but of course the GitHub certificate is the one presented if you use a GitHub sub-domain. You used to need Cloudflare’s “flexible” SSL option, which effectively means unencrypted between GitHub and them. However, for project pages you can use “full SSL”, which encrypts the connection but doesn’t validate the certificate. This doesn’t appear to work for organisation pages, only project pages. For example, huxley.unop.uk works with full SSL, but instabail.uk needs flexible SSL.

Unfortunately, you can’t add a custom certificate such as Cloudflare’s root cert (for a fully-trusted connection), like you can with GitLab pages. However, full HTTPS is a good idea for even just the browser connection and is required for Service Workers and thus PWA install banners.

The default templates for use with GitHub pages have HTTPS resources, so you won’t get mixed content warnings or styling issues. For example, one of the templates was patched with this commit.

For some examples that aren’t mine you can look at https://github.com/konklone/json, which is hosted by Eric Mill at https://konklone.io/json.

Of course, this is a bit contrived if you just want to put a site up. It’s good if you want to host documentation for an open source project that is already on GitHub but for anything else there are other options. Two of these free static site hosts are Netlify and Surge. They both offer easy and ad-free hosting with HTTPS on their free plans.