Host a Static Web Site On AWS S3 Bucket

In this blog post, I will show you how I create an AWS S3 Bucket and host a static HTML website on it.

About S3

AWS S3 in an Internet Storage service used by developers and admin to store data in AWS cloud.

S3 offer unlimited storage capacity at a low-cost price and one of services S3 offer is hosting Static HTML website on an AWS S3 bucket.

Get Started

To get started, the first thing I need to do is to create an S3 Storage bucket from the AWS management console, I can also use AWS CLI (will show in my next article).

In the configure option page, I will not use any advanced settings and click on Next.

In this section, I will Un-Tick the block all public access because I need to enable public access for the website to be accessible over the internet.

To finish the creation process, I will click on Create Bucket.

Now, I will move on to the configuration process, and I will go ahead and click on the bucket I just created.

From the permissions Tab, I will verify that public access is allowed again.

Next, I will copy the code below to Bucket policy page as shown in the image below, Make sure you replace the following name with your Bucket name

RENAME_AND_USE _BUCKET_NAME and click Save to finish.

{
 "Version": "2012-10-17", 
 { 
 "Sid": "PublicReadGetObject", 
 "Effect": "Allow", 
 "Principal": "*", 
 "Action": "s3:GetObject", 
 "Resource": "arn:aws:s3:::RENAME_AND_USE _BUCKET_NAME/*" 
 } 
 ] 
 } 

Below, you can see the code again, make sure you use your bucket name.

After clicking Save I will get the message below.

Now, I will enable the Static Website Hosting feature that allows us to host a static website on AWS.

From the properties page, I will click on Static Website Hosting and Select the Use this bucket to host a website.

After selecting the option, I will need to specify the Index document (in my case, I am using Index.html) and click on Save.

I can use the Endpoint URL to see the website in action.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.