Deploy Secure Github pages with Custom Domain on Cloudflare
We can enable HTTPS on Github pages with custom domain name on Cloudflare.
According to the previous blog about moving to Github pages below.
I got some stuffs to share about how to enable HTTPS on Github pages with our own domain name on Cloudflare.
Prerequisites
- Github pages that is already online in the url
https://<USERNAME>.github.io. - Domain name
- Cloudflare account
- IP addresses of Github pages according to Managing a custom domain for your GitHub Pages site
Action steps
Cloudflare configurations
- Go to Cloudflare > Select a domain name > Menu DNS > Records
- Add
Arecords with “Content” as Github pages IP addresses and “Proxy status” as “DNS only”.
Set “Name” as “@” if it’s root which means it’s top level domain and Cloudflare will show the domain name instead of “@” after adding the record. - Add
CNAMErecord with “Content” as our domain name, “Name” as “www”, and “Proxy status” as “DNS only”.
By default, new record will have “Proxy status” as “Proxied” which means it will go through Cloudflare’s network.
But we don’t need it because we are going to enable HTTPS by Github pages.
Make sure that we turn it off and the records have “Proxy status” as “DNS only”.
These are my configurations.
Github pages configurations
- Go to the repo of our Github pages.
- Select tab “Settings” > “Code and automation” > “Pages”
- Add our domain name under “Custom domain” section and click Save
- The checkbox “Enforce HTTPS” should be clickable and we click it.
- Github will issue the certificate and it takes some time to complete.
If the Cloudflare configurations have “Proxied” status, Github will not be able to issue the certificate.
And we would see the message: “Unavailable for your site because your domain is not properly configured to support HTTPS”.
Test it
Run
digcommand then we should see the IP addresses from Github pages.1
dig <DOMAIN_NAME> +noall +answer -t A
Try to access the domain name. Our webpage should be rendered properly with HTTPS.