Static Website Hosting with AWS S3

Setting up a static website on AWS S3 is an excellent way to achieve scalability and cost-efficiency. This guide will walk you through the process, using example.intertoons.com as an example, and assuming Cloudflare is used for DNS management.

Prerequisites

Ensure you have the following:

• An AWS account

• A domain registered (e.g., intertoons.com)

• Access to a Cloudflare account for DNS management

• Website files (HTML, CSS, JS, etc.)

Step-by-Step Guide

Step 1: Create an S3 Bucket

• Log in to AWS Management Console

• Navigate to S3 Service

• Create Bucket:

• Click on “Create Bucket”

• Name your bucket example.intertoons.com

• Choose a region

• Complete the bucket creation process

Step 2: Configure the Bucket for Static Website Hosting

• Access Bucket Settings:

• Click on your newly created bucket

• Go to the “Properties” tab

• Enable Static Website Hosting:

• Scroll down to “Static website hosting” and click “Edit”

• Enable “Static website hosting”

• Specify the index document (e.g., index.html)

• Optionally, specify an error document (e.g., error.html)

• Save changes

Step 3: Upload Your Website Files

• Navigate to the Overview Tab:

• Click on “Upload”

• Add your website files (HTML, CSS, JS, etc.)

• Ensure all files are uploaded correctly

Step 4: Set Bucket Policy for Public Access

• Access Bucket Permissions:

• Go to the “Permissions” tab of your bucket

• Click on “Bucket Policy”

• Add Bucket Policy:
  

Use the following policy to allow public read access

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

Step 5: Configure Cloudflare DNS

• Log in to Cloudflare Account

• Select Domain intertoons.com

• Navigate to DNS Tab:

• Add a CNAME record:

• Name: example

• Target: example.intertoons.com.s3-website-<region>.amazonaws.com (replace <region> with your AWS S3 bucket region)

• Save DNS Record

Step 6: Test Your Website

• Open Browser:

• Navigate to http://example.intertoons.com

• Ensure your website loads correctly

Precautions

• Ensure that your bucket name exactly matches your domain name.

• Double-check the bucket policy to ensure public access is configured correctly.

• Use HTTPS for security; consider setting up Cloudflare SSL.

FAQs

What is a static website?

• A static website consists of fixed content – HTML, CSS, and JavaScript files – and does not require server-side processing.

Why use AWS S3 for hosting?

• AWS S3 is highly scalable, durable, and cost-effective for hosting static websites.

How do I secure my static website?

• Use Cloudflare’s SSL/TLS features to enable HTTPS.

• Regularly update and audit your bucket policy.

Can I use a custom domain with AWS S3?

• Yes, by configuring your DNS provider (like Cloudflare) to point to your S3 bucket.

What if my website doesn't load?

• Verify your S3 bucket policy allows public access.

• Check your DNS settings in Cloudflare.

• Ensure your S3 bucket name matches your domain name.

done!