Enable Https Connection For GithubPages With Custom Domain

First and foremost

Firstly, read and follow the steps on this official instruction from CloudFlare. Do not change the auto-generated DNS rules unless you know what you are doing.

Not working?

Several things you may need to change if your site is not working properly after you completed all the steps. Be aware, it takes a long time for the newly updated DNS to be effective, be patient and do not worry and change things randomly. I waited for about 24 hours.

  1. You need a CNAME file in your repo root, containing only one line: yourdomain.com OR www.yourdomain.com. It decides which domain will response by default. Personally, I prefer the one with www
  2. Configure your DNS in CloudFlare:
    The first rule enables yourdomain.com and the second enables www.yourdomain.com
    seetting1
  3. Configure your Page Rules to allow Https connections
    Order matters!
    seetting2

Reference

  1. https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/
  2. https://www.jonathan-petitcolas.com/2017/01/13/using-https-with-custom-domain-name-on-github-pages.html