Deploy static websites Cloudflare+S3

Guide to deploy a static website with s3 bucket, backed by cloudflare.

Screenshot-2021-09-10-at-1.10.53-PM

  • Create S3 bucket with the name as intended domain. In this blogpost, I'm using https://travelsanta.com

  • Enable static website hosting:
    Screenshot-2021-09-10-at-12.33.40-PM

  • Allow Public Access:
    Screenshot-2021-09-10-at-1.21.28-PM

  • Use the bucket policy on S3:

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

For latest list of ipv4 and ipv6 address of Cloudflare, refer https://www.cloudflare.com/ips-v4 and https://www.cloudflare.com/ips-v6

  • Login to cloudflare and add a dns entry for the intended domain name, with CNAME entry with value as s3 bucket. The format value is travelsanta.com.s3-website.AWS_REGION.amazonaws.comScreenshot-2021-09-10-at-1.26.20-PM

Access the website with https://travelsanta.com and you'll have https, CDN, DDOS protection, etc.
The whole setup would be free of cost if the traffic is low.

Hope you've a secure static website and keep making internet awesome!

Bookmark this for a terraform implementation of the same.

Srujan

You should go to about section on this site.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.