DEV Community

Cover image for Hosting a static Website on S3
Bowei
Bowei

Posted on • Edited on

2

Hosting a static Website on S3

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

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

We disable Versioning and optionally, we can add tags.

Image description

Disable Server-side encryption and Create the bucket.

Image description

You should get a message like the one below;

Image description

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

Image description

Scroll down to Static website hosting and click on Edit.

Image description

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

Image description

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

Image description

Image description

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

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

Image description

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

Image description

Image description

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

Image description

Image description

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

Image description

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.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay