Jens Willmer

Tutorials, projects, dissertations and more..

Setup custom domain and SSL for GitHub hosted website

Intro

If you are thinking of hosting a blog on GitHub and like to use a custom domain for it then this blog post is for you. I will show you which services I used and which settings have worked for me.

To follow this tutorial you need to have access to:

  • The nameservers of your domain.
  • The settings page of your GitHub repository

In the following steps, I use the domain jwillmer.de. You need to replace this domain with your own to get it to work.

Domain Hosting Website

Create the following DNS records for your website:

  • CNAME named www and value YOUR-GITHUB-USERNAME.github.io
  • CNAME named jwillmer.de and value YOUR-GITHUB-USERNAME.github.io
  • A named jwillmer.de and value 192.30.252.153
  • A named jwillmer.de and value 192.30.252.154

Make sure that the A record IP’s are still the same by visiting the GitHub page.

GitHub CNAME

Cloudflare Domain Setup

The tutorial from Cloudflare: Create a Cloudflare account and add a website

Quick Setup

  • Create a free account at Cloudflare
  • Add your website to Cloudflare and follow the instructions
  • Use the free Cloudflare plan
  • After the domain setup you get domainserver names displayed. Copy them and replace your current at the website of your domain registrar
DNS Verification
Select Cloudflare Plan
Replace Nameservers
Cloudflare DNS Setup

GitHub Setup

Detailed setup instructions from GitHub: Using a custom domain with GitHub Pages

Quick Setup

  • Add a file with name CNAME to you root folder of the repository you like to host
  • Add your domain with https:// in front as content of the CNAME file: https://jwillmer.de
  • Go to the repository settings page and locate the custom domain field. Add jwillmer.de in that field
  • If you use the static site generator Jekyll you need to set your domain and subdomain in the _config.yml:
    • Set url to your domain name https://jwillmer.de
    • Optionally force SSL by adding enforce_ssl: jwillmer.de

Cloudflare Modifications

  • Go to the Crypto tab of your domain:
    • Set the SSL option to Full
    • Set Automatic SSL Rewrite to On to fix http links (If this is Off you need to use Flexible as SSL option)
  • Go to PageRules and create page rules for your website:
Cloudflare Page Rules

Discussion on GitHub

This tutorial was created after a request from Sampath Vanimisetti on Github. He helped me in the process to test this tutorial and improve it - thank you!