🌐 How to Host a Static Website Using AWS S3 🚀

In this article, we'll walk through the process of hosting a static website using AWS S3. By the end, you’ll have a live website accessible via a URL, complete with images and HTML content. Let’s get started! 💻✨

Step 1: Upload Files to Your S3 Bucket 🗂️

First, you need to have an S3 bucket. If you don’t have one, you can create it through the AWS Management Console. Once your bucket is ready, follow these steps: You can find the demo files here.

1. Upload Files:

   • Navigate to your S3 bucket.

   • Click on the Upload button.

   • Add your files (e.g., index.html and beach.jpg).

   • Click on Upload to upload the files.

2. Verify the Files: Ensure both index.html and beach.jpg are present in your bucket. ✔️

Step 2: Enable Static Website Hosting 🌐

Next, configure your S3 bucket to host a static website:

1. Go to Properties:

   • Navigate to the Properties tab of your S3 bucket.

   • Scroll down to the Static website hosting section.

2. Enable Static Website Hosting:

   • Click on Edit.

   • Select the Enable option.

   • Choose Use this bucket to host a website.

   • Specify your Index document as index.html.

3. Save the Settings:

   • Click Save changes. 💾

Step 3: Upload the index.html File 📄

Now, let's ensure our index.html file is uploaded:

1. Upload the Index Document:

   • Navigate to the Objects tab of your S3 bucket.

   • Click on Upload.

   • Add the index.html file.

   • Click Upload to complete the process.

Step 4: Make Your Content Public 🌍

To make your website accessible, you need to set your bucket policy to public:

1. Bucket Policy:

   • Go to the Permissions tab.

   • Scroll to the Bucket Policy section.

   • Edit the bucket policy to make the content public. Here is a sample policy you can use:

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

• Replace your-bucket-name with the name of your S3 bucket.

• Click Save. ✅

Step 5: Access Your Website 🔗

With everything set up, you can now access your static website:

1. Copy the Endpoint URL:

   • Go back to the Properties tab.

   • Scroll down to the Static website hosting section.

   • Copy the Bucket website endpoint URL.

2. View Your Website:

   • Paste the URL into your browser.

   • You should see your index.html content. For example, if your index.html contains “I love coffee. Hello world!” you will see this text.

3. Access Images:

   • To access images, append the image file name to the bucket endpoint URL. For instance, your-bucket-endpoint/beach.jpg to view beach.jpg.

Conclusion 🎉

Congratulations! You've successfully hosted a static website using AWS S3. This simple yet powerful setup is great for hosting small websites, portfolios, or any static content you wish to share. With AWS S3's scalability and reliability, your site is in good hands. 🤝

Feel free to share your thoughts or any questions in the comments below. Happy hosting! 🌟

---

Thanks for reading! If you enjoyed this tutorial, consider following me for more articles on AWS and cloud computing. 📚