🚀 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

1. 403 Forbidden Error

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

2. 404 Not Found

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

3. CSS Not Loading

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

4. 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

• S3 Static Website Hosting Guide
• S3 Bucket Policies

🤝 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?

• 💬 GitHub Issues: Create an issue
• 📱 Twitter: @devopsengineer
• 💼 LinkedIn: Connect with me

📜 License

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

🎉 Congratulations!

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!

Made with ❤️ for the DevOps community by Rushikesh