Mohamed Irshath
7 min readApr 1, 2023

Amazon S3 Overview and Static Website Hosting using S3

S3

Amazon S3:

Amazon s3 stands for Simple Storage Service. It is one of the core services in AWS. It first launched in 2006 till now it is one of the largely using service in AWS.

What is S3?

It is used to store large amount of data. For example, it can store photos, videos, files literally anything at the same time it is also efficient enough to retrieve the stored data.

It is an object-based storage service where every data inside the s3 is considered as objects.

The maximum size of the single file allowed in S3 can be up to 5TB.

If the size of the file is more than 5GB multi-part upload option must be used.

S3 offers different storage class to store data. (i.e.: Based on the usage of the data inside the bucket we can move it to other storage class to reduce the cost)

It also allows other services to integrate with S3. Ex.: Codebuild, SQS etc…

Key things to use S3:

1. scalability

S3 storage are scalable we don’t have to specify the size before creating.

AWS calls S3 as “Infinite Storage”

Throughput of the S3 is also scalable by AWS.

2. Security:

The data present in the S3 are encrypted by default. we can use two types of encryptions to encrypt data in data in s3.

Public Access to the S3 and the object access inside S3 can be protected using policies and ACLs (Access Control Lists).

3.cost efficient:

S3 charges for the amount of data stored in the bucket, request made to the bucket and the amount of data that travels to the internet. (Usually, S3 charges around $0.09 per GB to transfer to internet). whereas the data coming through the internet to the bucket is free!!

Let’s Create a bucket:

  1. Login to AWS Account.

(Make sure you have administrative access or S3 full access)

2. Type S3 and Click S3.

3. Click “Create Bucket”.

S3 Console

4. Now, Type Bucket Name.

here I'll go with “demo-static-website-bucket-1234

(Note: Bucket Name must be unique across AWS accounts and Buckets in AWS)

5. Select Region (us-east-1)

(Note: S3 is regional service)

Bucket Creation

Copy settings from S3 bucket” — If you created a bucket already in your account you can use the same configuration to your newly creating bucket. For this tutorial we will go from the scratch.

6. Choose ACLs disabled

(Note: This object ownership section is used to specify permission to the object created or stored in the S3 bucket. Recommended is to use ACLs disabled this allow access the object from current account. If need we can allow other account access by attaching policies)

Object Ownership

7. Untick “Block all Public Access

(Note: Best Practice is to tick this block. Since we are hosting a static website the object inside bucket has to be accessed by the public in order to render a website)

Public Access

8. Tick, I Acknowledge to confirm public access

Public Access Acknowledge

9. Choose disable bucket versioning

(Note: Versioning is the feature in S3. It is used to create a version of the same object uploaded in the S3 to make a rollback to the older version of that object. It is also used in case of user error or application failures)

Bucket Versioning

10. Tags — You can tag your bucket

11. Click Amazon S3 Manages Keys

(Note: As we talked about encryption earlier. By default, S3 objects are encrypted. SSE-S3 is the default encryption used. we can also use Amazon Key management service to encrypt. In order to make it simple we are using default encryption)

Object Encryption

In Advance Settings you can find for object-lock by default is disabled.

Adv. Settings

(What object-lock does is it prevent object from deletion or over-written Ex.: your bank account transaction history should not be modified by your bank or by you if modified it will cause major problem to the bank and to you as well to prevent tampering of data or modifying it, Object-lock is used.)

Ahaa!! You have successfully created S3 Bucket. Now let’s make it to host a website.

Hosting Static Website:

In order to host a static website a HTML File is required. Let’s first create a Simple HTML File.

  1. Create a HTML File.

Make sure the file name is index and the format is .html >> “index.html

2. Inside the index.html copy paste the below code.

<h1>
<Marquee>
Website is Live!!!
</Marquee>
</h1>

3. Click created bucket from your S3 console.

Bucket Listing

4. Click Upload.

Upload Section

5. Click Add File.

Add File

6. Select the index.html file and click upload.

7. Check your upload status and Click Close.

Upload Stauts

8. Now you can find your uploaded index.html file in the S3 bucket.

Object in Bucket

9. Now Click Properties. Scroll till the end to find static website hosting section.

Bucket Tabs
Static Website

10. Click Edit.

11. Choose Hosting Type as Host a Static website.

Specifying index.html file as the first page

12. In the Index document type your html file name for me index.html is the file name.

13. Click Save Changes.

14. Now you will get you S3 Bucket Endpoint. open the link in new tab of your browser.

Endpoint of S3 bucket

It shows 403 Forbidden Yes, it is due to we didn’t attach any policy to the S3 object present in the S3 bucket to get the HTML data. Next Step Lets Attach a policy to our S3 bucket to get data from any recourses.

Website Error

Attaching Policy to S3 bucket:

  1. Head to Permission tab present next to the properties tab.
Bucket Tabs
  1. Under Bucket Policy section edit bucket policy and paste the below code.
Bucket Policy Space
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}

The above JSON Denotes that:

Version: Specified by AWS (IDK why that date is used).

Statement: specifies the permissions attached. Every policy must have statement section.

Sid: It is denoted as statement id (optional).

Effect : Has two attributes either use Allow or Deny to the below actions.

Principal: Tells which AWS User or groups the access is granted or denied.

Action: Specifies which API is allowed or denied.

Resource: Denotes the S3 bucket and the path here we use “*” to access full bucket. Usually, to denote the specific resource the ARN of the resource is used.

Policy Attachment

3. Click Save Changes.

Now Reload the website. Tadaa you Website is live now.

Final Website

Cleanup:

Make Sure you have deleted your bucket.

If you like stay tuned to my profile to integrate route53 with the bucket.