How to host a static website using AWS S3 and Cloudflare

  • AWS

I’ve been noticing a previous post about how to host a static site using AWS services has been gaining in popularity.

Most recently a blog post by Thom Greene (@tbgree00) had mentioned the previous article and while all the steps in the previous post are accurate and works – I wanted to share how I now host static websites using AWS S3 and Cloudflare.

But first, why the change?

It’s a simpler process. In the previous post several AWS services (Route 53, Cloudfront, & Cert Manager) was needed to do what Cloudflare does by itself. It’s also cheaper as there is a cost that comes with Route 53 and Cloudfront, whereas Cloudflare is FREE.

It is more secure. In the previous post we created an S3 bucket and gave it public read access, using the process detailed below the bucket is no longer publicly accessible and only accessible if coming through Cloudflare. This ensures no one can try to side step all the protections that Cloudflare offers when trying to reach my static sites.

Requirements before getting started:

  • An Amazon Web Services account.
  • Domain name – I use and suggest either Namecheap or NameSilo to register new domains if you haven’t already. (Use coupon SAVE1OFFNAMESILO at NameSilo to save $1.00)
  • Already have a static HTML page designed and ready to upload.

Host a static website using AWS S3 and Cloudflare

Amazon S3 Bucket Setup

  1. First create a S3 bucket with the same name as your domain name, be sure to include the www. and select your desired AWS region.
    create s3 bucket www
  2. Then enable static website hosting for the bucket under the Properties tab.
    s3 static web hosting

    and set an index and error document file names and click SAVE. Be sure to make note of the bucket endpoint URL

    enable static website hosting

  3. To allow this bucket to be accessible via Cloudflare we will need to edit the bucket policy, under the permissions tab

    s3 bucket policy menu

    and copy/paste the following:

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::www.MYDOMAINNAME.com/*",
                "Condition": {
                    "IpAddress": {
                        "aws:SourceIp": [
                            "2400:cb00::/32",
                            "2405:8100::/32",
                            "2405:b500::/32",
                            "2606:4700::/32",
                            "2803:f800::/32",
                            "2c0f:f248::/32",
                            "2a06:98c0::/29",
                            "103.21.244.0/22",
                            "103.22.200.0/22",
                            "103.31.4.0/22",
                            "104.16.0.0/12",
                            "108.162.192.0/18",
                            "131.0.72.0/22",
                            "141.101.64.0/18",
                            "162.158.0.0/15",
                            "172.64.0.0/13",
                            "173.245.48.0/20",
                            "188.114.96.0/20",
                            "190.93.240.0/20",
                            "197.234.240.0/22",
                            "198.41.128.0/17"
                        ]
                    }
                }
            }
        ]
    }
    

    Note: Be sure to replace MYDOMAINNAME in the policy with your own domain name.

  4. You can now upload your static website to your S3 bucket.
    Note: Your website will not be accessible yet.

AWS S3 non-www bucket setup

We need to create a second S3 bucket so that when users try to access domainname.com they will be redirected to www.domainname.com.

  1. Create a second S3 bucket with the same name as your domain name, this one WITHOUT the www.
  2. Enable static website hosting for the bucket, but this time set it to redirect to your www.domainname.com bucket.
    s3 static website redirect

That’s it for the second bucket, now lets setup Cloudflare!

Cloudflare setup

  1. Log into Cloudflare and click on “+Add Site“.
    cloudflare add site

    Then type in your domain name and click on “Add Site“.

    cloudflare add domain

  2. Then select the FREE Cloudflare plan. Feel free to use another plan if you feel you need it.
    cloudflare select plan
  3. Next you may have one or more DNS records associated with your domain, if so remove them by clicking on the X next to each one of them.
    cloudflare remove dns records
  4. Now lets add some DNS records for our two AWS S3 buckets. We need to add a record for each S3 bucket.
    • Create a CNAME record with the name www and for the server field enter the www.yourdomain.com bucket endpoint URL without the https://
    • Create a second CNAME record with the name of your domain (without the www.) and for it’s server field enter the yourdomain.com bucket endpoint URL, also without the https://

    cloudflare add dns
    Then click on Continue.

  5. Cloudflare will then give you two nameservers to point your domain name to. So now log into your domain name registar and update the name servers to the nameservers Cloudflare gives you.
    cloudflare name servers

At this point you’ll just need to wait for DNS to update. This could potentially take 24-48 hours, but in most cases this is much faster.

There you have it, you now have a static website being hosted on S3 and the protections and speed improvements from Cloudflare.

If you’re looking to get in touch, follow me on Twitter!