Hosting a static Website on S3
Tags: s3, aws, webhosting, awscloud
Published: 2024-06-12 12:07:30

This article will show how to host static websites via S3 buckets by simply enabling the static hosting option and applying an efficient bucket policy to allow public access.

_Prerequesites_

Basic knowledge of Amazon S3 and Web hosting.

Firstly, we create the S3 bucket with a **globally unique name in a specified region we want.**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgwbcp0ateryufs1tg8h.png)

Under the **Block Public Access section**, we uncheck the box to enable Public access since we are going to be hosting a static website via the bucket.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5k454mcw6xu84ebqnyy.png)

We disable Versioning and optionally, we can add tags.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wic3x5f35328q07w6me.png)

Disable Server-side encryption and Create the bucket.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2cg7q8j4dwithdpmq13.png)

You should get a message like the one below;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko7j814s355lxu414w3g.png)

Click on the bucket name and go to the properties Tab.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwmatzg53xpo24luo2nu.png)

Scroll down to Static website hosting and click on Edit.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tyklnwgvbwngj3ho5dt.png)

Enable Static Web hosting & host a static website. Also input an index document name, typically _Index.html_  and save the changes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4ce2bxlmp7txk5e1l2o.png)

Next, go to the permissions tab of the bucket to input a bucket policy.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yktzu61p5b9pqywa7sr.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7zr7xzmh1hc1367qlh3.png)

Copy and paste the below bucket policy, replacing your actual bucket name with what is listed as _"Bucket-name"_ below and save changes.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woukfl53cx311knz2h0n.png)

Next, it's about time to upload the necessary documents.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuyzbwl5rxj3tfv2zx52.png)

Click on Add Files, add your website files one after another, and upload.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6edjhjdkzbxsdzmaooz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfnkyxd0mcps27gpr92u.png)

Go back to the properties tab and scroll down to find your S3 endpoint which will be used to access the website.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqyy79m2hpfi2i1vs88a.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59aiwi2ikbkmfh4crnc8.png)

Click on the endpoint and the static website is now accessible.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tn515wl10sml3uk1ucq.png)

**In the simplest of forms, this is an easy way to host a static website. More features like using CloudFront and Route 53 can be factored in eventually.**