5 min readAug 12, 2022

“Hosting a Static Website on S3 bucket ”

Let’s begin “How to host Static Website on AWS S3 bucket”

In this article, I am going to talk about how you can deploy a static website on AWS by uploading your website content into S3 bucket.

Now, I’d like to give a brief description on some terminologies that I am going to use in this article.

❓What is Amazon S3?

Amazon S3 ( Simple Storage Service) is an object storage service that stores data as objects within buckets. An object is a file and any metadata that describes the file. A bucket is a container for objects. To store data in Amazon S3, we first need create a bucket and specify a bucket name and AWS Region.

❓What are the benefits of using S3 bucket?

Each object can contain up to 5TB of Data
A resource can only be accessed by the owner until permission is granted to others by the owner which makes it more secure.
Back up and restore critical data
Archive data at the lowest data
Very low cost
All time availability
The simplicity of management
We can enable Multi-Factor Authentication (MFA) delete a S3 bucket to prevent accidental deletions and unintentional data loss.

Prerequisites:

You need an AWS account. You can sign up here and follow this tutorial in setting it up.
You need a static website. If you don’t have one, you can clone this demo project.

Contents:

Create a S3 bucket
Upload web files to S3 bucket
Secure S3 bucket through IAM policies
Configure S3 buckets

Let’s begin. 😃

Step1: Create S3 bucket

We need to create a S3 bucket to put our website’s files and folders for the static website. Now go to the aws management console and on the search icon type S3 and click on the S3, it will go to s3 dashboard. Then click on the create bucket.

Bucket name should be unique, the name you choose must be globally unique (for best practice, attach your AWS account ID to the name).

Next, choose your preferred AWS Region from the drop-down.

Then, under Block Public Access settings, uncheck Block all public access and accept the acknowledgement. Now our bucket is accessible to the public and once we host our static website, people can see it. 🆒

Now keep everything as it is like, Bucket Versioning disable

Add tag and Default encryption disable

Now click Create bucket.

Step 2: Upload files into S3 bucket

Currently, the bucket is empty. We need to upload files for the static website.

Click on the upload button and upload files in the bucket.

I have uploaded 5files, 4.png, index.html, profileStyle.css, README.md and sabina.png

file. After successfully added those files, scroll down and click upload. Please don’t refresh the page or close the page until you see upload succeeds:

Step 3: Configure IAM policies to secure the bucket

Now, we have to add some policies to secure out bucket from unauthorized access.

From the S3 dashboard, click on the name of the bucket, then click on Permissions tab. Scroll down to the Bucket policy section and click on its Edit button.

Now add the following bucket policy and make sure to replace bucket-name with the name of your bucket. My bucket name is static-website-bucket-672569216574

{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicRead”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: [
“s3:GetObject”,
“s3:GetObjectVersion”
],
“Resource”: “arn:aws:s3:::static-website-bucket-672569216574/*”
}
]
}

Now scroll down and click on Save changes.Your bucket has access to public, as shown below.

Step 4 : Configure S3 bucket

Now we have specify the default page and error page for our website.

Go to S3 dashboard ➡ name ➡ Properties tab

Then scroll down to the Static website hosting section ➡Edit button ➡ select Enable for Static website hosting ➡ Host a static website for the Hosting type.

Enter the file for your Index document and Error document. The Error document is optional. I put index.html for both Index document and Error document.

Scroll down and click on Save Changes.