Create static website using AWS S3

2 min readOct 9, 2020

Create a simple html files, index.html and error.html

index.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cdn example.com - home</title>
</head>
<body>
    <h1>Welcome to Content Delivery Network of example.com</h1>
    <p></p>
</body>
</html>

error.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>cdn example.com - error</title>
</head>
<body>
    <h1>Error page of example.com</h1>
    <p></p>
</body>
</html>

Go to AWS console, click service, and search S3, navigate to S3 console

Create Bucket

Upload index.html and error.html and empty folder for upload from API later on, says, assets/images

Update Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn.example.com/*"
        }
    ]
}

Update CORS configuration

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Enable Static website hosting

Final step, go to cloudflare to add dns CNAME

cdn.example.com.s3-website-ap-southeast-1.amazonaws.com

Ref:

https://docs.aws.amazon.com/AmazonS3/latest/dev/EnableWebsiteHosting.html

https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html

https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

Create static website using AWS S3

Written by Kingyinma