🌐 Deploying a Static Website on AWS S3: A Step-by-Step Guide

Introduction
In this guide, we’ll walk you through deploying a simple static website using AWS S3 (Simple Storage Service) — perfect for beginners who want to host static content like HTML, CSS, and JavaScript files. Let’s get started! 🚀

Step 1: Install the AWS CLI 🛠️
First, you’ll need to install the AWS Command Line Interface (CLI) on your local machine. This tool allows you to interact with AWS services right from your terminal.

Step 2: Generate Access Keys 🔑
1. Log into your AWS account and search for IAM (Identity and Access Management).
2. Create a new user group and assign roles as needed.
3. Generate access keys (Access Key ID and Secret Access Key) for this user.

Step 3: Verify AWS CLI Installation ✔️
Check if the AWS CLI was installed correctly by running:

aws --version

Step 4: Configure AWS CLI ⚙️
Connect your AWS CLI to your AWS account using this command:

aws configure

You will be prompted to enter:
- Access Key ID(from Step 2) 🔑
- Secret Access Key🔒
- Region (e.g., `us-east-1`)
- Output format(Type`json` for simplicity)

Step 5: Download Website Source Code 📥
To obtain HTML, CSS, JavaScript, and images for your website, clone my GitHub repository using the following command:

cd Downloads
git clone git@github.com:bhargavteja1999/source-code.git

Step 6: Verify the Download ✅
Make sure the repository has been downloaded by listing the files:

ls source-code

Step 7: Create an S3 Bucket 🪣
Run the following command to create a new S3 bucket:

aws s3 mb s3://your-bucket-name

Replace `your-bucket-name` with your desired value.

Step 8: Upload Files to the S3 Bucket 📤
Copy the downloaded files to your S3 bucket using the AWS CLI:

aws s3 cp source-code/ s3://your-bucket-name/ --recursive

Replace `your-bucket-name` with the appropriate name.

Step 9: Verify the Files 🔍
Go to the AWS Management Console and check if the files have been uploaded to your S3 bucket.

Step 10: Enable Static Website Hosting 🌐
1. Navigate to the S3 Management Console.
2. Click on your S3 bucket.
3. Go to the Properties tab.
4. Scroll down to Static website hosting and click Edit .
5. Enable the option and select Host a static website.

Step 11: Set Index and Error Documents 📄
Specify the main page of your site (e.g., `index.html`) and an error page if applicable.

Step 12: Save Changes 💾

Step 13: Set Bucket Permissions for Public Access 🔓
1. Go to the Permissions tab of your S3 bucket.
2. Edit Block public access settings and ensure Block all public access is turned off.

Step 14: Add a Bucket Policy 📜
Add a policy to allow public read access:

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

Replace your-bucket-name with your actual bucket name.

Step 15: Access Your Website 🌍

Go back to the Properties tab of your bucket. Under Static website hosting, you’ll find the Bucket website endpoint URL. Click on it to view your deployed website!

🎉 And that’s it! You’ve successfully deployed a static website using AWS S3. Enjoy exploring and customizing your site as you learn more!

Happy hosting! 🚀