Instantly share code, notes, and snippets.

@cvan /HOWTO.md
Last active Sep 10, 2018

Embed
What would you like to do?
How to serve a custom HTTPS domain on GitHub Pages with CloudFlare: *FREE*, secure and performant by default

Instructions

CloudFlare is an awesome reverse cache proxy and CDN that provides DNS, free HTTPS (TLS) support, best-in-class performance settings (gzip, SDCH, HTTP/2, sane Cache-Control and E-Tag headers, etc.), minification, etc.

  1. Make sure you have registered a domain name.
  2. Sign up for CloudFlare and create an account for your domain.
  3. In your domain registrar's admin panel, point the nameservers to CloudFlare's (refer to this awesome list of links for instructions for various registrars).
  4. From the CloudFlare settings for that domain, enable HTTPS/SSL and set up a Page Rule to force HTTPS redirects. (If you want to get fancy, you can also enable automatic minification for text-based assets [HTML/CSS/JS/SVG/etc.], which is a pretty cool feature if you don't want already have a build step for minification.)
  5. If you don't already have one, create a new repository on GitHub to store your site's contents (preferably in the form of static web pages and assets; though not necessary, for the A-Frame site we use a static-site generator called Hexo).
  6. From your domain registrar's settings, create a CNAME record to point <domain>.<tld> to <user>.github.io. (Refer to the GitHub docs for more information.)
  7. In your Github repo, create a file at the root called CNAME containing the domain name (e.g., aframe.io).
  8. Push to GitHub Pages (either by pushing to gh-pages or master of your repo; or you can use the master branch of a repo named <org>.github.io - example: https://github.com/aframevr/aframevr.github.io/ automatically gets published to https://aframevr.github.io/, which redirects to https://aframe.io/)
  9. You're done! All content will now be served to your users from CloudFlare.
@caike

This comment has been minimized.

Show comment
Hide comment
@caike

caike Mar 28, 2017

Thanks for putting this together! If my registrar is DNSimple and I'm pointing to Cloudflare's nameservers (per step #3), then where should step #6 be done: DNSimple or Cloudflare ?

caike commented Mar 28, 2017

Thanks for putting this together! If my registrar is DNSimple and I'm pointing to Cloudflare's nameservers (per step #3), then where should step #6 be done: DNSimple or Cloudflare ?

@IcanDivideBy0

This comment has been minimized.

Show comment
Hide comment
@IcanDivideBy0

IcanDivideBy0 Apr 4, 2017

@caike step #6 should be done in Cloudflare

IcanDivideBy0 commented Apr 4, 2017

@caike step #6 should be done in Cloudflare

@goyllo

This comment has been minimized.

Show comment
Hide comment
@goyllo

goyllo Apr 27, 2017

Yes Step 6 should be done in Cloudflare, here is all steps to implement SSL in your github pages using cloudflare

goyllo commented Apr 27, 2017

Yes Step 6 should be done in Cloudflare, here is all steps to implement SSL in your github pages using cloudflare

@cdtinney

This comment has been minimized.

Show comment
Hide comment
@cdtinney

cdtinney May 13, 2017

Worked for me. Thanks!

cdtinney commented May 13, 2017

Worked for me. Thanks!

@rpavlov

This comment has been minimized.

Show comment
Hide comment
@rpavlov

rpavlov Jun 16, 2017

God bless

rpavlov commented Jun 16, 2017

God bless

@AmusingThrone

This comment has been minimized.

Show comment
Hide comment
@AmusingThrone

AmusingThrone Jun 25, 2017

I am not sure why I keep getting NET::ERR_CERT_COMMON_NAME_INVALID, no matter what I do. I have followed the steps on your website as well. I can setup Cloudflare for any other site, just doesn't want to work on GitHub

AmusingThrone commented Jun 25, 2017

I am not sure why I keep getting NET::ERR_CERT_COMMON_NAME_INVALID, no matter what I do. I have followed the steps on your website as well. I can setup Cloudflare for any other site, just doesn't want to work on GitHub

@BlythMeister

This comment has been minimized.

Show comment
Hide comment
@BlythMeister

BlythMeister commented Jul 18, 2017

I have same issue as @AmusingThrone

@ms-studio

This comment has been minimized.

Show comment
Hide comment
@ms-studio

ms-studio Sep 12, 2017

After setting this up for an Apex domain, I get errors: "ERR_SSL_VERSION_OR_CIPHER_MISMATCH" in Chrome, "SSL_ERROR_NO_CYPHER_OVERLAP" in Firefox.

UPDATE: the problem was only temporary, during the time it took CloudFlare to generate the certificate. Now the certificate shows as active, and the domain is loading fine.

So if your site already gets traffic, a good idea is to set up everything while keeping SSL optional. In a second step, once your certificate works, you may enable a rule to force HTTPS.

ms-studio commented Sep 12, 2017

After setting this up for an Apex domain, I get errors: "ERR_SSL_VERSION_OR_CIPHER_MISMATCH" in Chrome, "SSL_ERROR_NO_CYPHER_OVERLAP" in Firefox.

UPDATE: the problem was only temporary, during the time it took CloudFlare to generate the certificate. Now the certificate shows as active, and the domain is loading fine.

So if your site already gets traffic, a good idea is to set up everything while keeping SSL optional. In a second step, once your certificate works, you may enable a rule to force HTTPS.

@cvan

This comment has been minimized.

Show comment
Hide comment
@cvan

cvan Oct 18, 2017

Just seeing all these comments now. Good tips, @ms-studio. Thanks!

Owner

cvan commented Oct 18, 2017

Just seeing all these comments now. Good tips, @ms-studio. Thanks!

@Andrew-Max

This comment has been minimized.

Show comment
Hide comment
@Andrew-Max

Andrew-Max Nov 5, 2017

Regarding step 6: I am trying to use a repo that does not match my account name (I already have that deployed as a different site). The name of the repo I am trying to deploy is qubitix.

So then my A is qubitix.com and then I need to setup a cname to <user>.github.io or user.github.io/qbitix ? It won't let me do the second but I don't see how the first won't go to the other repo which matches my user name.

Any help would be greatly appreciated!

Andrew-Max commented Nov 5, 2017

Regarding step 6: I am trying to use a repo that does not match my account name (I already have that deployed as a different site). The name of the repo I am trying to deploy is qubitix.

So then my A is qubitix.com and then I need to setup a cname to <user>.github.io or user.github.io/qbitix ? It won't let me do the second but I don't see how the first won't go to the other repo which matches my user name.

Any help would be greatly appreciated!

@rugk

This comment has been minimized.

Show comment
Hide comment
@rugk

rugk Nov 22, 2017

To be secure you'd also have to enable "Full SSL (Strict)" in Cloudflare… see why

rugk commented Nov 22, 2017

To be secure you'd also have to enable "Full SSL (Strict)" in Cloudflare… see why

@greggubarev

This comment has been minimized.

Show comment
Hide comment
@greggubarev

greggubarev Dec 6, 2017

great! thx!

greggubarev commented Dec 6, 2017

great! thx!

@mkpt

This comment has been minimized.

Show comment
Hide comment
@mkpt

mkpt Dec 13, 2017

For the folks here looking for more help setting up the page rule, check out Cloudflare's official instructions on how to set this up. It turns out I had set up the rule wrong, which was preventing my site from showing up properly. Hope this helps!

mkpt commented Dec 13, 2017

For the folks here looking for more help setting up the page rule, check out Cloudflare's official instructions on how to set this up. It turns out I had set up the rule wrong, which was preventing my site from showing up properly. Hope this helps!

@Conorbro

This comment has been minimized.

Show comment
Hide comment
@Conorbro

Conorbro Dec 15, 2017

Worked like a charm, thanks!

Conorbro commented Dec 15, 2017

Worked like a charm, thanks!

@locaterobin

This comment has been minimized.

Show comment
Hide comment
@locaterobin

locaterobin commented Jan 14, 2018

Thank you!

@encels

This comment has been minimized.

Show comment
Hide comment
@encels

encels Feb 6, 2018

Thanks, worked for me!

encels commented Feb 6, 2018

Thanks, worked for me!

@colinbrislawn

This comment has been minimized.

Show comment
Hide comment
@colinbrislawn

colinbrislawn Feb 10, 2018

After running 3. point the nameservers to CloudFlare's, all your DNS setting must be changed in Cloudflare!
(I spent time changing settings in Hover, only to discover at it's all-CloudFlare, all-the-time, after changing DNS settings.)
🌩 ⚡️

colinbrislawn commented Feb 10, 2018

After running 3. point the nameservers to CloudFlare's, all your DNS setting must be changed in Cloudflare!
(I spent time changing settings in Hover, only to discover at it's all-CloudFlare, all-the-time, after changing DNS settings.)
🌩 ⚡️

@AGutan

This comment has been minimized.

Show comment
Hide comment
@AGutan

AGutan Feb 10, 2018

Thanks bro! Yea Cloudflare DNS requires proper cleanup for this to work.

AGutan commented Feb 10, 2018

Thanks bro! Yea Cloudflare DNS requires proper cleanup for this to work.

@hopes91

This comment has been minimized.

Show comment
Hide comment
@hopes91

hopes91 Mar 14, 2018

Thank you!

hopes91 commented Mar 14, 2018

Thank you!

@micnguyen

This comment has been minimized.

Show comment
Hide comment
@micnguyen

micnguyen Apr 1, 2018

I'm having the same question as @Andrew-Max: My github pages is served under <username>.github.io/<repo>, where would I configure that in Cloudfare/Registrar/GitHub for that to work?

EDIT: I just decided to move my page to a user github page hosted under <username>.github.io and everything works and is secure. Thanks!

micnguyen commented Apr 1, 2018

I'm having the same question as @Andrew-Max: My github pages is served under <username>.github.io/<repo>, where would I configure that in Cloudfare/Registrar/GitHub for that to work?

EDIT: I just decided to move my page to a user github page hosted under <username>.github.io and everything works and is secure. Thanks!

@GuiSim

This comment has been minimized.

Show comment
Hide comment
@GuiSim

GuiSim Apr 13, 2018

@rugk I understand the importance of Strict but I couldn't set it up. How would the SSL certificate on my github page be valid if I set a CNAME on github? Even CloudFlare's official guide (see above) recommends using Full but not Full (strict). I don't see how it could work.

GuiSim commented Apr 13, 2018

@rugk I understand the importance of Strict but I couldn't set it up. How would the SSL certificate on my github page be valid if I set a CNAME on github? Even CloudFlare's official guide (see above) recommends using Full but not Full (strict). I don't see how it could work.

@gpkc

This comment has been minimized.

Show comment
Hide comment
@gpkc

gpkc Apr 20, 2018

I looks like the option "Always use HTTPS" is not served as a page rule anymore.
I found this option under the Crypto tab.

gpkc commented Apr 20, 2018

I looks like the option "Always use HTTPS" is not served as a page rule anymore.
I found this option under the Crypto tab.

@aneeshmg

This comment has been minimized.

Show comment
Hide comment
@aneeshmg

aneeshmg May 13, 2018

@gpkc are you sure? cause I was able to find the "Always use HTTPS" as a page rule.

aneeshmg commented May 13, 2018

@gpkc are you sure? cause I was able to find the "Always use HTTPS" as a page rule.

@newswim

This comment has been minimized.

Show comment
Hide comment
@newswim

newswim May 22, 2018

Just so everyone's aware, Github Pages now supports forced HTTPS for custom domains.

https://blog.github.com/2018-05-01-github-pages-custom-domains-https

newswim commented May 22, 2018

Just so everyone's aware, Github Pages now supports forced HTTPS for custom domains.

https://blog.github.com/2018-05-01-github-pages-custom-domains-https

@snmslavk

This comment has been minimized.

Show comment
Hide comment
@snmslavk

snmslavk Aug 9, 2018

I described my experience here when I tried to configure it
https://medium.com/@avsenev/build-your-website-with-github-pages-godaddy-and-cloudflare-62ac7cb3faed

Unfortunately I faced the situation that this approach is not covered all my needs and I switched to amazon s3 and route53.

snmslavk commented Aug 9, 2018

I described my experience here when I tried to configure it
https://medium.com/@avsenev/build-your-website-with-github-pages-godaddy-and-cloudflare-62ac7cb3faed

Unfortunately I faced the situation that this approach is not covered all my needs and I switched to amazon s3 and route53.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment