— aws, cloudflare, s3, cloudfront — 2 min read
Amazon Web Service's S3 is an excellent place to deploy a static website. If Cloudflare is your DNS provider, however, there are a few tricks that you need to be aware of when setting up your static site.
We're going to talk about how to get started with your static site on S3 and your DNS in Cloudflare.
First, of course, we need a static site deployed to S3. The AWS documentation does a good job at explaining how to setup a site, but we'll briefly run through the steps here as well.
One of the first things that you'll see in the AWS documentation linked above is that your bucket name must match the name of the website you are hosting. That's true in most cases, but since we're going to be using Cloudflare DNS, that's not true in our case.
Oh, and we don't even need to tell AWS that we're going to be using this bucket to host our site. I'll show you why shortly.
example.com
to the name of the bucket you just created.1{2 "Version": "2012-10-17",3 "Statement": [4 {5 "Sid": "PublicReadGetObject",6 "Effect": "Allow",7 "Principal": "*",8 "Action": ["s3:GetObject"],9 "Resource": ["arn:aws:s3:::example.com/*"]10 }11 ]12}
NOTE: This makes items in your bucket available to the public. Do not put things in this bucket that you do not want everybody in the world seeing.
index.html
file for testing.Now, we're going to create a Cloudfront distribution in AWS. While not strictly necessary for a static website on AWS, it is necessary to get Cloudflare's SSL to work with our site.
Create Distribution
.Get Started
under the Web section on the next page.Origin Domain Name
input, select the bucket that you created above.Viewer Protocol Policy
option.Alternate Domain Names (CNAMEs)
input, type the domain name that we're going to use for our site. This your domain that you will or already have setup in Cloudflare.Default Root Object
, enter index.html
, the file that we uploaded the our bucket.We're in the final stretch now. We only have to setup Cloudflare to point to our Cloudfront distribution. From here on out, I'm going to assume that you already have an account and have setup your domain in Cloudflare.
example.com
, and the Domain Name of your Cloudfront distribution, d1234gflgylt.cloudfront.net
. Make sure not to include https://
with your Cloudfront distribution.www
and again the Domain Name of your Cloudfront distribution. We want to make sure that we send both www.example.com
and example.com
to our static site.And that's it! Wait a few minutes (most likely seconds), and you'll see your static site served from S3, through a Cloudfront distribution and finally to Cloudflare under your custom domain.