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.
- Create a Github repository
- Install hexo-deployer-git
- Change the main
_config.ymlto include git deployment
- Generate and deploy to the repository:
hexo g && hexo d
- Update A-records and CNAME on CloudFlare to match Github’s IP
- Change CloudFlare SSL setting on
- Add CNAME file with your domain on
- Re-generate and re-deploy to the repository
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: firstname.lastname@example.org:<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 22.214.171.124 Automatic Both A budidharmawan.com 126.96.36.199 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
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:
Add canonical link to your site’s
<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:
Now your site is served over https! For free! — Aside for the domain etc, etc..