Deploy Your Static Site on AWS S3

5 min readOct 28, 2022

Hii folks,

So, as it is obvious from the title, I will be telling you how to deploy a static website or maybe your first HTML page on the AWS S3 bucket so that it is available to the outside world.

This blog will tell you how to use AWS S3 storage service as a hosting service for static websites. I’m repeatedly saying ‘static website’ because after all, S3 service is just a storage service that will be providing some storage on the cloud which is accessible by all.

So let’s begin…

FUN FACT -- 
If you are wondering what does this S3 mean so as per my knowledge let me tell you it stands for 'Scalable Storage Service'.😃

Steps Involved :
* Create S3 bucket on AWS (make sure its name is the same as your domain name).
* Create an HTML page (or it can also be a react build bundle I will be showing a simple HTML page for this blog) make sure its name is “index”
* Upload it to the bucket.
* Configure bucket to act as our hosting.
* Done, you are ready to go.

CREATING S3 Bucket

→ Go to AWS console
→ In search bar at the top, search for S3 and click on S3 under the services section

→ Now you are on the S3 Management Console, click on the create bucket button, supposably, an orange color button :)

→ Give your bucket a unique name, and keep all settings the same except one which is shown in the image below, [by default, public access is blocked to the buckets we are making our bucket publicly accessible for our purpose]

→ After this, click on create bucket button at the bottom, again in orange color … haha :D

→ Now you will be brought back to the S3 management console and if you can see a green success message at the top you are also able to see your newly created bucket on the page.

→ Click on the bucket name.

UPLOADING HTML FILE TO BUCKET

→ I will be using a simple HTML file with the below code and saving this file as index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>S3 Bucket</title>
  </head>
  <body>
    <h1> Hello from S3 Bucket </h1>
  </body>
</html>

→ Click on the Upload button …. here also you can see an orange button :D

→ On the next screen, click on add files and select the file from your system and keep all remaining values as default, scroll to the bottom and click on the Upload button at the bottom.

→ Now if everything goes well, then your file will be successfully uploaded to the bucket.

→ Close the upload status page by clicking on the orange close button on the right side.

→ Now you can see your uploaded file in the bucket as shown below

CONFIGURE THE BUCKET TO HOST A STATIC SITE

→ Now click on the Properties tab

→ Scroll to the bottom where you can see the Static website hosting section, which is disabled by default.

→ Click on the Edit button.

→ On the next page, enable the option and give the name of the index document, in our case, it is index.html, and keep all settings to default. (You can also modify it if you want to do some advanced stuff, I just want to keep it as simple as it can be 😄)

→ Click on save changes.

→ You can now see your public url at the bottom of the properties tab items

Let’s go to it… mine looks like -
http://test-voidhat-bucket.s3-website.ap-south-1.amazonaws.com/

But wait, what’s it 🤔

it shows a 403 forbidden page, which is not what we expected… right!

So, let’s mitigate this too

→ Go to the Permissions tab, edit the bucket policy and enter the below JSON Object in the input (make sure you edit your bucket name in place of mine in the Resource array)

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