🖥️ Lab · Host this website on Amazon S3

Before you start

You need an AWS account, the AWS CLI installed, and credentials configured. The bucket name must be globally unique across all of AWS, so replace pushpjeetinitm with your own name throughout — for example yourname-aws-project.

aws --version          # confirm the CLI is installed
aws configure          # access key, secret key, region, output format
aws sts get-caller-identity    # confirm who you are authenticating as

1 · Create the S3 bucket

aws s3api create-bucket \
    --bucket pushpjeetinitm \
    --region ap-south-1 \
    --create-bucket-configuration LocationConstraint=ap-south-1

2 · Upload the website

From the folder containing index.html, css/ and js/:

# upload one file
aws s3 cp index.html s3://pushpjeetinitm/

# or upload the whole site, including the css and js folders
aws s3 sync . s3://pushpjeetinitm/ --exclude ".*" --exclude "*/.*"

# check what is there
aws s3 ls s3://pushpjeetinitm/ --recursive --human-readable

3 · Enable static website hosting

aws s3 website s3://pushpjeetinitm/ \
    --index-document index.html \
    --error-document index.html

The index document is served when someone requests the bucket root. Setting the error document as well means a mistyped URL lands on your home page rather than an XML error.

4 · Allow public access

This is the important part. By default S3 blocks all public access — a deliberately safe default. For the traditional website endpoint the content must be publicly readable.

aws s3api put-public-access-block \
    --bucket pushpjeetinitm \
    --public-access-block-configuration \
    BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

5 · Add a bucket policy

Create a file called bucket-policy.json:

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

Then apply it:

aws s3api put-bucket-policy \
    --bucket pushpjeetinitm \
    --policy file://bucket-policy.json

6 · Your website URL

With Region ap-south-1 and bucket pushpjeetinitm, the endpoint is:

Open it in a browser. You should see the home page of this site.

The whole sequence in one block

# 1. Create the bucket
aws s3api create-bucket \
    --bucket pushpjeetinitm \
    --region ap-south-1 \
    --create-bucket-configuration LocationConstraint=ap-south-1

# 2. Upload the website
aws s3 sync . s3://pushpjeetinitm/

# 3. Enable website hosting
aws s3 website s3://pushpjeetinitm/ --index-document index.html

# 4. Disable public access blocking
aws s3api put-public-access-block \
    --bucket pushpjeetinitm \
    --public-access-block-configuration \
    BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

# 5. Apply the public-read bucket policy
aws s3api put-bucket-policy \
    --bucket pushpjeetinitm \
    --policy file://bucket-policy.json

# 6. Open it
echo http://pushpjeetinitm.s3-website.ap-south-1.amazonaws.com/index.html

Making it production-ready

This is the part worth talking about in your project presentation. The lab version works; it is not how you would run a real site.

After this lab works, the natural next exercise is exactly that: S3 → CloudFront → HTTPS → Route 53, turning a basic S3 website into a production-style architecture.

Troubleshooting

aws s3 rm s3://pushpjeetinitm/ --recursive
aws s3api delete-bucket --bucket pushpjeetinitm --region ap-south-1