Rushikesh
Back to blog
•
5 min read
Complete Guide to AWS S3 Static Website Hosting
AWS DevOps S3 Static Hosting Cloud

AWS S3 Static Website Hosting Tutorial

Complete Guide to Hosting Your Website on Amazon S3

Welcome to this comprehensive DevOps tutorial! In this guide, you’ll learn how to host a static website using Amazon S3, one of the most cost-effective and scalable ways to deploy static websites.

What You’ll Learn

  • Setting up an AWS S3 bucket for static website hosting
  • Configuring bucket policies and permissions
  • Uploading and managing website files

Prerequisites

Before we begin, make sure you have:

  • An AWS account (Create one here)
  • Basic understanding of HTML/CSS
  • A web browser
  • The website files (Clone this repo)

Step-by-Step Tutorial

Step 1: Create an S3 Bucket

  1. Login to AWS Console

    • Navigate to AWS Console
    • Search for “S3” in the services menu

  2. Create New Bucket

    - Click "Create bucket"
- Bucket name: my-portfolio-website-[unique-suffix]
- Keep default settings for now
- Click "Create bucket"

    Pro Tip: Bucket names must be globally unique across all AWS accounts!

Step 2: Configure Bucket for Static Website Hosting

  1. Navigate to Your Bucket

    • Click on your newly created bucket
    • Go to the “Properties” tab

  2. Enable Static Website Hosting

    - Scroll down to "Static website hosting"
- Click "Edit"
- Select "Enable"
- Index document: index.html
- Error document: error.html (optional)
- Click "Save changes"

  3. Note the Website Endpoint

    • Copy the bucket website endpoint URL
    • Format: http://bucket-name.s3-website-region.amazonaws.com

Step 3: Configure Bucket Permissions

  1. Disable Block Public Access

    - Go to "Permissions" tab
- Click "Edit" on "Block public access"
- Uncheck all 4 options
- Click "Save changes"
- Type "confirm" when prompted

    Security Note: Only disable block public access for static website hosting. Never do this for buckets containing sensitive data!

  2. Add Bucket Policy

    - In "Permissions" tab, scroll to "Bucket policy"
- Click "Edit"
- Copy the policy from s3-bucket-policy.json
- Replace "YOUR-BUCKET-NAME" with your actual bucket name
- Click "Save changes"

Step 4: Upload Website Files

  1. Upload Files Using AWS Console

    - Go to "Objects" tab in your bucket
- Click "Upload"
- Click "Add files" and select index.html and styles.css
- Leave all other settings as default
- Click "Upload"

  2. Verify Upload

    - Check that both files appear in your bucket
- Both files should show as "Publicly accessible" 
- You can click on each file to verify they uploaded correctly

Step 5: Test Your Website

  1. Access Your Website

    - Use the S3 website endpoint URL from Step 2
- Example: http://my-portfolio-website-123.s3-website-us-east-1.amazonaws.com

  2. Verify Everything Works

    • Check that the HTML loads correctly
    • Verify CSS styles are applied
    • Test responsive design on different devices
    • Check browser developer tools for any errors

Bucket Security

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

Troubleshooting

Common Issues

403 Forbidden Error

  • Check bucket policy is correctly applied
  • Verify block public access settings
  • Ensure file permissions are correct

404 Not Found

  • Verify index.html exists in bucket root
  • Check static website hosting is enabled
  • Confirm bucket name matches exactly

CSS Not Loading

  • Check file path in HTML is correct
  • Verify CSS file was uploaded
  • Check browser developer tools for errors

Website Endpoint Not Working

  • Use website endpoint, not REST endpoint
  • Format: bucket-name.s3-website-region.amazonaws.com
  • Wait a few minutes for DNS propagation

Additional Resources

AWS Documentation

Contributing

Found an issue or want to improve this tutorial?

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

Support

Need help with this tutorial?

License

This tutorial is open source and available under the MIT License.

Conclusion

You’ve successfully learned how to host a static website on AWS S3! This is a fundamental skill in modern DevOps and cloud engineering. Keep practicing and exploring more AWS services to build your cloud expertise.

Remember: The best way to learn DevOps is by doing. Try modifying the code, experiment with different configurations, and most importantly, break things and fix them – that’s how you really learn!