AWS S3: Hosting a static website by Harsh Patel

AWS S3: Hosting a Static Website

You don’t need additional web hosting services if you have an AWS account, AWS provides ability to use S3 bucket to host static website and It’s fun.

Let’s go through the process of hosting a static website on Amazon S3 in three easy steps.

  1. Creating an S3 bucket and set up access protocols
  2. Configuring your S3 bucket
  3. Test and show it to the world!

It’s a fairly simple step to create an S3 bucket on AWS,

Go to, AWS Management console > All Services > Storage > S3

Selecting S3 service

Create a new S3 bucket (you can use an existing bucket if you prefer) and provide a meaningful name

Creating a new S3 bucket
Providing your S3 bucket a name

Brownie Note: Even though AWS S3 is a global service, selecting a geographically closer AWS Region will provide you low latency and minimized costs. Eventually, it will determine your AWS S3 website endpoint.

For your website to be publicly accessible, we’ll need to unblock all public access. (Note: this will make your website publicly available to the world)

Make your website publicly accessible

Once your bucket is created, you’ll receive a notification with details and your S3 bucket will be listed under Buckets.

Successful creation of an S3 bucket

In order to make your S3 content publicly available, we’ll add an bucket policy under Buckets > Permissions > Bucket Policy (edit) > Save Changes

Use below policy and change Your-bucket-name with appropriate bucket name

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

Now, let’s add elements to your S3 bucket, I have used an sample index.html file as my landing page. (you can use below sampe code for testing)

index.html

<html>
<head>
<title>Snoopy The Dog</title>
</head>
<body>
<h1>Hello, I am Snoopy</h1>
<p>Town's favourite dog</p>
</body>
<img src="resource images/snoopythedog.jpg" width=400/>
</html>

Upload all relevant files to your S3 bucket as shown below (HTML and Image files)

All relevant resource files needs to be uploaded

At last, we need to enable statice website hosting setting under

Buckets (your bucket) > Properties > Static website hosting (edit) > Save Changes

Mention your Index document name (remember it’s case sensitive), In my case it’s index.html

Enabling static website hosting

Optional: you can add Error document or Redirection rules if you want to provide more detailed experience.

Let’s test if our website is working as expected! You should be able to find your Website endpoint under,

Buckets (your bucket) > Properties > Static website hosting > Bucket website endpoint

AWS S3 Static website

If all went well you’ll be able to see your website. If not, you need to go through all the above steps to rectify if you did anything wrong.

Additionally, you can also use a custom domain registered with AWS Route 53 service (It is chargeable).

I hope you enjoyed this small fun exercise but don’t forget to delete your S3 bucket if this was just for practice purpose so you don’t incur charges.( By the time you will be reading this, I might have deleted the S3 bucket so I don’t incur unwanted charges😉)

I am an Rookie scaling vertically as an Veteran. Learning Cloud and DevOps technologies because “It ran on my machine” excuse doesn’t work anymore.