Why Host on AWS S3?

Amazon S3 (Simple Storage Service) is perfect for hosting static websites - those with HTML, CSS, and JavaScript files that don't need server-side processing. It's cost-effective, reliable, and scales automatically with your traffic.

This guide will walk you through hosting a single-page site on S3, making it publicly accessible, and optionally adding your own domain name and HTTPS security.

What you'll need: An AWS account and your website files ready to upload.

📦 Step 1: Create an S3 Bucket

Think of an S3 bucket as a folder in the cloud where you'll store your website files. The bucket name must be globally unique across all of AWS.

Using AWS Console:

  1. Go to S3 in the AWS Console
  2. Click Create bucket
  3. Pick a globally unique name (e.g., mysitename.com)
  4. Choose your preferred region
  5. Click Create bucket

Using AWS CLI:

aws s3 mb s3://mysitename.com --region us-east-1

📤 Step 2: Upload Your Website Files

Put your index.html and any assets (CSS, JavaScript, images) in a local folder on your computer.

Using AWS Console:

  1. Open your bucket
  2. Click Upload
  3. Drag and drop your files or use Add files
  4. Click Upload

Using AWS CLI (recommended for multiple files):

aws s3 sync ./site s3://mysitename.com

This syncs everything in your local ./site folder to your S3 bucket.

🌐 Step 3: Enable Static Website Hosting

This tells S3 to serve your files as a website instead of just storage.

Using AWS Console:

  1. Open your bucket
  2. Go to Properties tab
  3. Scroll to Static website hosting
  4. Click Edit and Enable
  5. Set Index document to index.html
  6. Save changes

Using AWS CLI:

aws s3 website s3://mysitename.com --index-document index.html --error-document error.html

You'll get a website endpoint like:
http://mysitename.com.s3-website-us-east-1.amazonaws.com

🔓 Step 4: Make Your Site Public

By default, S3 buckets are private. You need to allow public access so browsers can view your website.

First, unblock public access:

  1. In your bucket, go to Permissions
  2. Edit Block public access
  3. Uncheck Block all public access
  4. Save changes and confirm

Then, add a bucket policy:

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

Apply the policy:

aws s3api put-bucket-policy --bucket mysitename.com --policy file://policy.json

✅ Step 5: Test Your Website

Open the S3 website endpoint (from Step 3) in your browser. You should see your index.html page!

🎉 Congratulations!

Your website is now live on the internet. Anyone with the URL can visit it.

🚀 Optional: Advanced Features

🌍

Custom Domain

If you own a domain (like mysitename.com), you can point it to your S3 website using DNS settings or Route 53.

🔒

HTTPS Security

S3 websites are HTTP-only. For HTTPS, use CloudFront (AWS's CDN) with an SSL certificate from AWS Certificate Manager.

⚡

Performance

CloudFront also speeds up your site by caching it at edge locations worldwide, making it load faster for visitors.

💰

Cost

S3 hosting is very affordable - typically just a few cents per month for small websites. You pay only for storage and data transfer.

📄 Sample index.html File

Minimal HTML to get started:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>mysitename.com</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
  <h1>Hello from S3!</h1>
  <p>This is a single-page site served from S3.</p>
</body>
</html>

🔧 Troubleshooting Tips

❌

403 Forbidden Error

Check that your bucket policy allows public access and that "Block public access" is turned off.

🔄

Changes Not Showing

S3 updates can take a few minutes. Try refreshing your browser or clearing cache.

📱

Mobile Testing

Test your site on different devices and browsers to ensure it works well everywhere.

🔍

SEO Friendly

Include proper meta tags, alt text for images, and descriptive page titles for better search engine visibility.

← Back to Study & Wisdom