DEV Community

Cover image for Host a Static Website on Amazon S3
Debabrata Halder
Debabrata Halder

Posted on

Host a Static Website on Amazon S3

Introducing

What is Amazon S3?

Amazon S3 (Simple Storage Service) provides cloud storage for scalable data management. It's ideal for securely archiving, accessing, and backing up data, with high availability and simple integration possibilities.

How I used Amazon S3 in this project

In today's project, I designed a simple asd.html file, uploaded it to the S3 bucket "first-aws-project-debabrata" made it public, and gained a lot about utilizing Amazon Web Services.

The one surprise I wasn't expecting in this project was to receive the "Access Denied" error, which forced me to alter the permissions in order to make the file in public readily available.

This project took me a few hours to do, including producing the HTML file, sending it to S3, and debugging the permissions.

How I Set Up an S3 Bucket

Creating an S3 bucket took only a few seconds. The process is quick and simple, involving selecting a name, region, and settings, followed by immediate bucket creation.

I chose the Europe (Stockholm) region (eu-north-1) for its low latency, data sovereignty, and GDPR compliance, ensuring high performance and alignment with European data protection standards.

S3 bucket names must be unique across all of AWS to avoid confusion, since the name is part of the web address used to access your files from anywhere in the world.

Image description

Upload Website Files to S3

I uploaded a single file to my S3 bucket—that was the simple asd.html file. 

This file is the main webpage, and I have basic styling to display the page correctly.

Image description

Static Website Hosting on S3

Website hosting means storing website files on a server that is accessible over the internet, allowing users to view and interact with the site using a domain name or URL.

To enable website hosting with my S3 bucket, I chose the Properties tab, scrolled to the static website hosting panel, selected Edit, enabled static webhosting, chose "Host a static website," and set "asd.html" as the index document.

An Access Control List (ACL) is used to manage permissions on your resources, specifying who can access them. I enabled ACLs to make my project public and allow broader access to the files.

Image description

Bucket Endpoints

A bucket website endpoint URL in Amazon S3 enables web hosting. 

It follows the format:
http://<bucket-name>.s3-website-<region>.amazonaws.com 

For your example:
http://first-aws-project-debabrata.s3-website.eu-north-1.amazonaws.com/asd.html

When I first visited the bucket endpoint URL, I saw an "Access Denied" error. 
The reason for this error was likely due to insufficient bucket permissions or missing public read access on the file.

Image description

Success!

To resolve this connection error, I went to the Actions dropdown, selected "Make public using ACL," and confirmed by choosing "Make public." This granted public access to the file.

Image description

Lessons Learned

  • Permissions Matter: S3 doesn’t mess around with security, which is great once you know what you’re doing.
  • Start Simple: Hosting a static website on S3 is a fantastic way to learn AWS. It’s like training wheels for the cloud.
  • You’ll Feel Like a Tech Wizard: Seriously, hosting a website feels way cooler than it probably is, but that’s the fun part.

Top comments (0)