Budi Dharmawan

A.K.A. BUBS

Brown eyes, deuteranomalic. Oh the irony.

Hexo, Github Pages, CloudFlare, SSL : Holy Shit

If the title is not obscure enough, this post is all you need to create a Hexo blog, publish it on Github Pages, set up your custom domain, and use the flexible SSL from CloudFlare. Your shiny blag will soon be served over https! Yay!

I assume that you are familiar with Hexo and Github, and you know how to push things to a repository.

If you’re not — but willing to learn, — spend a couple minutes doing Christopher’s “Getting Started with the Hexo Blogging Framework” and Github’s Hello World Project. As the more advanced people already being impatient, let’s get started. This post is heavily inspired by Sheharyar Naseer’s article “Set Up SSL on Github Pages With Custom Domains for Free” with some adaptation for Hexo. Check out his blog! He writes interesting stuffs.

TL;DR

Getting Your Blog Up on Github Pages

So you wrote your post and it’s served on your port 4000 when you run hexo s. Neat. Now, create a new repository on Github called <username>.github.io (mine would be budi.github.io) — yes, that is a repository name.

You would also want to install hexo-deployer-git to ease up things. On your project directory, run:

npm install hexo-deployer-git --save

Edit your main _config.yml file to include these lines:

deploy:
  type: git
  repo: git@github.com:<username>/<username>.github.io.git

If you haven’t setup your SSH public key, you might want to use https on the repo field instead, like so:

deploy:
  type: git
  repo: https://github.com/<username>/<username>.github.io.git

Generate your blog with hexo g, and you will see files piling up on the public folder of your project directory. Now run hexo d, wait until it’s all done and viola! Your blog is now up on Github Pages! Open up <username>.github.io on your browser and rejoice.

Setting Up CloudFlare

I’m not gonna go into details here, just follow these steps to change your domain name servers to use CloudFlare. If you already setup your domain using CloudFlare before, you can skip ahead to the next step. Upon adding your website, CloudFlare should automatically detect and generate records that match the records on your registrar.

While you’re on CloudFlare, you can add your domain to point to your Github Pages. My strategy is to use my apex domain (budidharmawan.com) and redirect my www subdomain to my apex domain. So on my DNS records, I made sure of these three records:

TYPE    NAME                VALUE               TTL         DNS & HTTP PROXY
----------------------------------------------------------------------------
A       budidharmawan.com   192.30.252.153      Automatic   Both
A       budidharmawan.com   192.30.252.154      Automatic   Both
CNAME   www                 budidharmawan.com   Automatic   Both

The two IP addresses above is what Github use to serve custom domains. Still on CloudFlare, also check on the Crypto tab on your domain and make sure to set the SSL to Flexible.

Next step is to setup CNAME so that Github knows you’re using custom domain. On your source directory, add a file called CNAME — all caps — with your domain name in it. You can just run this command:

echo your-domain.com >> CNAME

Generate and deploy your blog to your Github page once again (on your project directory):

hexo g && hexo d

Check if the site is live on your custom domain. Open up your browser and go to your custom domain. It should already display your site! Nice~

Details, details, details

Now you can actually try to open your site over https and it will show up just fine. But there are some things you need to add/change to make it better.

On your main _config.yml file, edit the url setting to use https:

url: https://your-domain.com

Add canonical link to your site’s <head>:

<link rel="canonical" href="<%= config.url %>" />

As mentioned on Sheharyar’s post, also add this script on your head to redirect user from http to https:

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

That’s It!

Now your site is served over https! For free! — Aside for the domain etc, etc..