Hosting a web site (for free) with S3, CloudFront, and Cloudflare
I host a handful of web sites for free using Amazon S3, CloudFront, and Cloudflare. This whole setup takes only a couple minutes. Here’s how:
Architecture
+-----------+ +------------+ +------------+
| | | | | |
| S3 Static | | CloudFront | | Cloudflare |
| Website |<---| CDN |<---| DNS |<---Inbound
| | | | | |
+-----------+ +------------+ +------------+
Cloudflare
Add your domain to Cloudflare. You can follow their instructions for setting up nameservers wherever you purchased your domain.
S3 Static web site
Create a bucket on S3. I like to use the fully-qualified domain name as the bucket name. This will hold the distributable files for the web site and provide some basic hosting.
Using ACL control, grant Everyone (public access) Objects: List and Bucket ACL: Read.
In Properties, enable Static web site Hosting. Set Index and Error Document to index.html
.
Upload Your Website
Now would be a good time to set up continuous delivery of your distributable website to the S3 bucket you just created. You can also just drag and drop the files into the S3 bucket on AWS if you need to. I use Schrodinger for continuous integration.
Certificate Manager
Request a certificate for your domain name(s). Make sure you include additional names for any subdomains you need.
You’ll need to verify ownership by adding some CNAMEs to Cloudflare.
CloudFront Distribution
Create a CloudFront Distribution. This will accept the CNAME(s) for your custom domain.
Change the Price Class to Use Only U.S., Canada and Europe if that’s all you need.
Add any Alternate Domain Names (CNAMEs) that will be used to access your site (like www.
prefix).
Choose SSL Certificate Custom SSL Certificate (example.com). Choose the certificate you created in Certificate Manager.
Set Default Root Object to index.html
.
Cloudflare
In the DNS tab, set up your site’s DNS. Add a CNAME from your domain name to the CloudFront distribution URL. Don’t forget to add any other CNAMEs, like www
.
In the SSL/TLS tab, pick the mode Full.
Under the Edge Certificates subtab, toggle Always Use HTTPS to On.
Wait ⏳
It might take 24 hours for your site to become available, but after that your site should be live, and it should never exceed the free tier on AWS.