How to host a static website on Amazon S3

Step 1 of 3 · About 15 minutes

Amazon S3 is a storage service, but it can also serve files directly to web browsers. If your website is made of plain HTML, CSS, JavaScript and images, S3 can host it cheaply with no server to manage.

1. Create a bucket named after your domain

In the AWS console, open S3 and choose Create bucket. Name the bucket exactly the same as your domain, for example example.com. When a request reaches the S3 website endpoint, S3 uses the domain name to find the matching bucket, so the names must match.

Pick a region close to most of your visitors and note it down. You will need it for the website address later.

2. Upload your website files

Open the bucket, choose Upload, and add your files and folders. At a minimum you need:

index.html – the home page
error.html – the page shown when a URL does not exist

Keep the same folder structure you use on your computer. A file at css/styles.css locally should be uploaded so its key is css/styles.css in the bucket.

3. Turn on static website hosting

Go to the bucket's Properties tab, scroll to Static website hosting and choose Edit. Select Enable, set the index document to index.html and the error document to error.html, then save.

S3 now shows a bucket website endpoint, similar to http://example.com.s3-website.us-east-2.amazonaws.com. This is the address your DNS will point to.

4. Allow public reads

On the Permissions tab, edit Block public access and clear Block all public access. Then edit the Bucket policy and paste the policy below, replacing example.com with your bucket name:

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

Common error: "Policy has invalid resource." The resource must be written exactly as arn:aws:s3:::bucket-name/*: three colons, no //, and ending in /*. The /* matters because s3:GetObject applies to the objects inside the bucket, not to the bucket itself.

5. Test the endpoint

Open the bucket website endpoint in your browser. You should see your home page. If you get 403 Forbidden, check that public access is unblocked and the policy saved. If you get 404 Not Found, check that index.html is at the top level of the bucket and not inside a folder.

Next step

The site works, but only at a long Amazon address. Next, point your own domain to S3 with Cloudflare.