Day 4: Mastering S3 Buckets, Policies, and Objects: A Hands-On Guide to Creating a Static Website

Create S3 Bucket

S3 is a service that provides bucket to store objects. Here, bucket can be considered as container and objects can be considered as files such as images, jpg, code files etc. Go to S3 and create a new bucket with a unique name as shown below.

The bucket is open for public access as shown below by deselecting all options.

You can give a specific Tag to your bucket. This is to be noted that S3 buckets are by default encrypted and decrypted as shown below.

Here is your bucket.

Hosting a Static Website through S3

Let’s Host a Static Website through S3. Go to Properties of your bucket.

Edit Static Website

Generate Policy to add Permissions to Bucket

By default, S3 buckets are private, meaning only the owner has access to the files. To host a static website, you need to allow public access to the files (HTML, CSS, JS, images, etc.) stored in the bucket. A policy helps you define which objects in the bucket should be publicly accessible.

Now, Generate a policy to give certain permissions to the bucket objects because we need to give access to the objects inside the bucket. To generate policy, we can take help of Policy Generator as shown below.

The above policy generated will automatically generate a JSON file as shown below. You can manage that file according to you and save it.

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

For static web hosting, you typically create a policy that allows public read access to the files in your S3 bucket, ensuring that users can access your website content without restrictions, while keeping the ability to manage the bucket secure.

Now, a Read Policy is attached to the bucket which will give permission to read the objects in the bucket. To check the static website copy the link of website as shown and run over the browser.

Adding HTML files to the Basket

Now, add a index.html and error.html files in to your bucket.

Static Website is Here

Here is your Webpage.

Now, if you search for Home page it will show index.html file. But what if you search for anything else, it will show Error 404. So, to make that page beautiful, you can write an error page which will redirect you to homepage as shown below.

This blog covers everything about S3 Bucket. I hope you find it helpful! Stay tuned for more insights on AWS services. Don’t forget to follow for more useful blogs. – Neha Bhardwaj