Using Cloudflare Free SSL In GitHub Pages With Custom Domain

I have succeed in migrating my blog from Hexo to Hugo platform, new domain is AxdLog. As Github Pages doesn't provide SSL certificate for custom domain, so I need to deploy it separately. CloudFlare provides free SSL certificate, and it has the ability of anti-ddos.

This article documents how to configure CloudFlare free SSL certificate in Github Pages.

This article is one of my personal static blog build series:

1. Using Hugo and Travis CI To Deploy Blog To Github Pages Automatically
2. Using Cloudflare Free SSL In GitHub Pages With Custom Domain
3. Setting Up Slack Build Notification in Travis CI for Github Project

Configure Cloudflare

Registering CloudFlare account, if you have one, just login.

Add Websites

If you're a new registered user. It will show a page Add your site. Inputing the target domain, here I input axdlog.com.

Clicking button Add site, it shows page We're querying your DNS records:

Clicking button Next, it shows page Select a Plan

The following is price list:

It is recommended that you choose plan Pro or Business if you have the ability to pay. The benefits are more functions and support the development of Cloudflare.

Here I choose Free Website, clicking button Confirm Plan, it show page DNS query results.

Add DNS Records

It list all currently existed DNS records of your domain. Deleteing all existed records, creating 2 new records.

The following are my DNS records:

Once operation is completely, it shows page Change your Nameservers.

Change Your Nameservers

CloudFlare provides 2 DNS address:

• dina.ns.cloudflare.com
• roan.ns.cloudflare.com

The domain registrar of my domain is Namecheap, selecting target domain in Domain List, choosing custom dns in NAMESERVERS section, add the 2 DNS address into the input field.

Once operation is finished, it will return to page Change your Nameservers, clicking button Continue.

Update Nameservers

The page shows:

Status: Website not active (DNS modification pending)

Please ensure your website is using the nameservers provided:

• brianna.ns.cloudflare.com
• kurt.ns.cloudflare.com

Allow up to 24 hours for this change to be processed. There will be no downtime when you switch your name servers. Traffic will gracefully roll from your old name servers to the new name servers without interruption. Your site will remain available throughout the switch

If you are finished changing Nameservers at domain registrar, client the button Recheck Nameservers at the right of the page. It will check it the configuration is active. It will takes a while to take effect, just be patient.

It it is passed, the state of Status: Pending will be changed to Status: Active, showing This website is active on CloudFlare.。

Crypto

Manage Cryptography settings for your website.

Return to the top of the page, clicking icon Cryptos.

SSL has 4 choices: Off、Flexible、Full、Strict. If you wanna view the explanation, just clicking the following Help.

Commonly choosing Flexible, I choose Full referenced by Set up cloudflare.

Next setting up HTTP Strict Transport Security (HSTS), clicking Enable HSTS, choosing I understand, then clicking Nest step, enabling the following 2 settings:

• Apply HSTS policy to subdomains (includeSubDomains)
• No-Sniff Header

Clicking Save to exit.

You can optimize other functions according to personal needs.

Configuring Hugo

Setting operation in Hugo is simpler then Hexo. What you need to do is just add a file named CNAME into the branch master of repo (maxdsre.github.io). Adding the custom domain name into the file, here the content is axdlog.com.

Due to it is integrated deploying through Travis CI, I just need to add a new line in config file .travis.yml.

1
2
3
4

script:
    - hugo
    # new line
    - echo 'axdlog.com' > public/CNAME

Test in Browser

Testing in browser, it redirects to https successfully and shows green padlock icon. It is approved in Google Chrome and Mozilla Firefox.

It took me at least 5 hours to configure SSL in Hexo. But now the total operation is less then half an hour.

References

• Set Up SSL on Github Pages With Custom Domains for Free
• How To Add Free Cloudflare SSL in Github Pages with Custom Domain?
• Hexo blog with custom domain and cloudflare

Change Log

• 2018.04.11 16:05 Wed America/Boston
  • first draft