Step-by-Step Guide: Hosting a

Static Website on AWS S3

Amazon Simple Storage Service (Amazon S3) is a scalable
cloud storage service offered by Amazon Web Services
(AWS). It is designed to store and retrieve large amounts
of data, making it a fundamental building block for various
cloud-based applications. Here’s a brief overview of AWS
S3:

Key Features and Concepts:

1. Scalability: S3 is highly scalable, allowing you to store

and retrieve virtually unlimited amounts of data. It
automatically scales to accommodate growing data
volumes.

2. Durability and Availability: S3 offers high durability,

with data stored across multiple availability zones
within a region. This redundancy ensures that your data
is highly available and protected against hardware
failures.

3. Data Consistency: S3 provides strong read-after-write

consistency for all objects, ensuring that once you write
data to S3, subsequent reads will return the same data.
4. Object-Based Storage: S3 stores data as objects,
which consist of the data itself, a key (unique identifier),
and metadata. Objects can be files of any type, and you
can organize them into buckets (containers for objects).

5. Data Management: S3 allows you to categorize

objects using customizable metadata and tags. You can
set lifecycle policies to automatically transition objects
to different storage classes or delete them after a
specified time.

6. Security and Access Control: S3 offers fine-grained

access control through Access Control Lists (ACLs) and
bucket policies. You can control who can access your
data and what they can do with it.

7. Data Encryption: S3 supports both server-side and

client-side encryption to ensure the security of your
data at rest and during transit.

8. Storage Classes: S3 provides different storage classes

optimized for various use cases, including Standard,
Intelligent-Tiering, Glacier, and more. Each class offers
different performance and cost characteristics.

9. Static Website Hosting: S3 can be used to host static

websites, making it easy to publish and deliver web
content to users.
10. Versioning: S3 supports versioning, allowing you to
preserve, retrieve, and restore every version of every
object stored in a bucket.

11. Cross-Region Replication: You can replicate data

across different AWS regions to improve availability and
compliance, or even replicate data to other AWS
accounts.

12. Event Notifications: S3 can trigger notifications

(using AWS Lambda, SQS, etc.) when certain events
occur, such as object creation or deletion.

Use Cases:

 Backup and Recovery: S3 is often used as a reliable

and cost-effective solution for data backup and disaster
recovery.

 Big Data Analytics: S3 can store data for analytics

platforms like Amazon Redshift, Amazon Athena, and
Amazon EMR.

 Archiving: Glacier storage class is suitable for long-

term data archiving at a low cost.

 Content Distribution: S3 combined with Amazon

CloudFront can efficiently distribute content to users
worldwide.

 Application Hosting: S3 can host static websites,

application assets, and media files.
 IoT Data Storage: S3 can store and analyze data
generated by Internet of Things (IoT) devices.

Amazon S3 is a versatile service that plays a central role in

many cloud-based applications and services, enabling
secure, scalable, and highly available storage for various
data types and workloads.

Steps to host static website in S3.

Step 1: Sign In to AWS Console

1. Open your web browser and navigate to the AWS

Management Console.

2. Enter your AWS account credentials (username and

password) to log in.

Step 2: Create an S3 Bucket

1. In the AWS Management Console, search for and select

the “S3” service.
2. Click the “Create bucket” button.

3. Provide a globally unique name for your bucket (e.g.,

“my-static-website”).

4. Choose a region that is geographically closest to your

target audience for better performance.

5. Leave the default settings for the rest of the options and
click “Create bucket.”
Bucket is created.

Step 3: Configure Bucket Properties

1. Once your bucket is created, select it from the list of

buckets.

2. Go to the “Properties” tab and enable “Static website

hosting.”

3. Enter the “Index document” (e.g., “index.html”) and

“Error document” (e.g., “error.html”) if you have one.
Step 4: Upload Your Website Files

1. Go to the “Overview” tab of your bucket.

2. Click the “Upload” button to add your static website

files (HTML, CSS, JavaScript, images, etc.).

3. You can either drag and drop files or use the upload
interface.
File index.html Uploaded.
Step 5: Make Objects Public

1. Select the uploaded files in your bucket.

2. Go to the “Actions” dropdown and choose “Make

public.”

3. Confirm that you want to make the files public. This is

necessary to allow public access to your website
content.
Step 6: Access Your Website

1. After making file public, your static website should be

accessible at the endpoint provided in the “Static
website hosting” section of your bucket’s properties. It
will look like this: http://your-bucket-name.s3-website-

region.amazonaws.com.

Successfully hosted static website

And that’s it! Your static website should now be hosted on

AWS S3 and accessible to the public. Remember that S3 is
designed for hosting static content. If your website
requires server-side processing or dynamic content, you
might need additional services like AWS Lambda, Amazon
API Gateway, or a different hosting solution.
Hosting a Static Website with
Amazon S3
What is Amazon S3?

Amazon S3 (Simple Storage Service) is a service offered by

AWS for object storage through a web service interface. It
can be used to store or retrieve any amount of data such
as documents, images, videos, etc.
S3 bucket is a resource in Amazon S3. It is a container
where files and folders can be uploaded.
What is Amazon CloudFront?

Amazon CloudFront is a content delivery network (CDN)

service offered by AWS. It is used to speed up content
delivery and can be integrated with Amazon S3.
Benefits of using AWS 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 which makes it more
secure.
 It is cheap.
 You can enable Multi-Factor Authentication (MFA)
delete on an S3 bucket to prevent accidental deletions
and unintentional data loss.
Prerequisites

If you’d like to follow this tutorial, please make sure the

following requirements are met.

 AWS account. You can sign up here and follow

this tutorial in setting it up.
 A static website. If you don’t have one, you can clone
this demo project.
Table of Contents
1. Create an S3 bucket
 2. Upload web files to S3 bucket
3. Secure S3 bucket through IAM policies
4. Configure S3 bucket
5. Serve content from S3 bucket with CloudFront

Now, let’s get into it!

Step 1 — Create an S3 bucket

You will need to create an S3 bucket to put your website’s

files and folders.

To do this, login into your AWS management console and

click on Services on the top navbar. From
the Services drop-down, select S3 from
the Storage section. This should display
the S3 dashboard.

From the S3 dashboard, click on Create bucket. Give the

bucket a unique name, 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.
Under Block Public Access settings for this
bucket section, uncheck the Block all public
access checkbox and accept the acknowledgement. This is
done to make the bucket accessible to the public because
you are going to host a website in it.

Click on disable for Bucket Versioning.

You can also Add tag to the bucket for easy identification.

Under Default encryption section, click on disable for

Server-side encryption.
Then click on Create bucket.

Step 2 — Upload web files to S3 bucket

After creating the bucket, you need to upload your

website’s files and folders into it.

From the S3 dashboard, click on the name of the bucket

you just created.

On the Objects tab, you can see that the bucket is

currently empty, click on the Upload button.
This should take you to the Upload page. Click Add
files to add the website files and use Add folder to add
the website folders.

Note: The whole website folder shouldn’t be added at

once. Instead, add its content one after the other. For
example, with the demo project linked up top, I uploaded
my signup.html as a file, signup.js as a file, css as a
folder and img as a folder.
After the necessary files and folders have been added,
scroll down and click on Upload.

The uploading should be done in a few minutes depending

on your network and content size. Also, please do not close
the tab while the upload process is going on.
Step 3 — Secure S3 bucket through IAM policies

Now you need to add some policies to secure your bucket.

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.
Add the following bucket policy to it and make sure to
replace bucket-name with the name of your bucket.

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

Then scroll down and click on Save changes.

This should change the bucket access to public, as shown

below.
Step 4 — Configure S3 bucket

You need to specify the default page and error page for
your website.

From the S3 dashboard, click on the name of the bucket,

then click on the Properties tab.

Scroll down to the Static website hosting section and

click on its Edit button.

Select Enable for Static website hosting.

Also, select Host a static website for the Hosting type.

Enter the file for your Index document and Error

document. The Error document is optional. I
used signup.html for both Index document and Error
document.

Scroll down and click on Save Changes.

After saving, If you click on the bucket website endpoint, it
would display your website.
Step 5 — Serve content from S3 bucket with CloudFront

From the Services drop-down, scroll down to Networking

& Content Delivery section and click on CloudFront.
This should take you to the CloudFront dashboard.

Click on Create Distribution. On Select a delivery

method for your content page, click on Get
Started under the Web section.

Under the Origin Settings section, click on the Origin

Domain Name field and select the S3 bucket you created
earlier. In the Origin Path field, enter / to indicate root
level.

For Restrict Bucket Access, select Yes.

For Origin Access Identity, select Create a New

Identity.

For Grant Read Permissions on Bucket, select Yes,

Update Bucket Policy.
Scroll down to the Default Cache Behavior
Settings section. For Viewer Protocol Policy,
select Redirect HTTP to HTTPS.

Next, scroll down to the Distribution Settings section.

Inside the Default Root Object field, enter the filename
at the root level, which should be your landing page. I
used signup.html as my Default Root Object.
Leave the rest of the options as default and click
on Create Distribution.

Now, you can see the distribution you created from the
CloudFront dashboard. It might take a few minutes for it to
be deployed.
After the CloudFront distribution has been deployed, copy
the URL from the Domain Name column and paste it into
your browser. Yay!🎉 That’s it!

Now, you can access your website with:

1. CloudFront domain name e.g

d3450i4qtm1w2p.cloudfront.net
2. Website endpoint e.g http://demo-95581515414.s3-
website-us-east-1.amazonaws.com
3. S3 object URL e.g https://demo-95581515414.s3.us-
east-1.amazonaws.com/signup.html

You should now know how to host a static website with

Amazon S3 and speed up the content delivery using AWS
CloudFront. Even though you had to go through a few
steps, you did it and you're awesome!