Hosting an S3 site via Cloudflare
From my previous post, you can see that I hosted a slide show on a subdomain on hitbgsec.keithrozario.com. The site is just a keynote presentation exported to html format, which I then hosted on an S3 bucket.
The challenge I struggled with, was how to point the domain which I hosted on Cloudflare to the domain hosting the static content.
The recommended way is to just create a simple CNAME entry and point it to the S3 bucket, but that didn’t work because the ‘crypto’ settings on Cloudflare apply to the entire domain — and not individual subdomains.
And since my website at www.keithrozario.com had a crypto setting of ‘Full’, the regular CNAME entry kept failing. I could have downgraded to ‘Flexible’ but that would mean my blog would be downgraded as well — which wasn’t ideal.
Why downgrade my main blog to accommodate a relatively unimportant sub-domain.
Instead found that the solution is to overlay a CloudFront Distribution in front of S3 Bucket — and then point a CNAME entry to the Distribution.
The solution looks something like this:
And here’s the steps:
- Create a CloudFront Distribution using the S3 bucket as your origin
- Enter the domain (in my case
hitbgsec.keithrozario.com) as an Alternate Domain Name for the Distribution. - Set the default root object to
index.html - Set Viewer Protocol policy to redirect http to https
- Set Object Caching to customizable and set the minimum TTL to a ridiculously long number (this is a static site, cache very aggressively)
Once done. We merely take the domain name of the distribution (e.g. dorwqk7jz5uyr.cloudfront.net) — and create a CNAME entry for hitbgsec.keithrozario.com pointing to it.
Voila. This way, we get to keep a full SSL cloudflare connection while hosting our contents in a static S3 bucket.
Note: that as of now, CloudFront doesn’t charge for storage on the edge, hence the aggressive cache settings don’t cost extra (unless you wanna start invalidating the cache). This speeds up the website, as CloudFlare will always get it’s data from the CloudFront distribution without it having to go back to the S3 origin — should this change, you might want to revisit storing the entire 100MB presentation on the edge.