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.

Static website hosting is where the magic happens.

  • I went to the Properties tab in my bucket.
  • Scrolled down to Static Website Hosting, clicked Edit, and turned it on.
  • Then, I set asd.html as the "index document"—basically, the homepage.

This step is where your bucket stops being just storage and starts being a real website.

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.
  • Don't Forget to Clean Up: I deleted my S3 bucket after I was done to avoid unnecessary charges.

Top comments (1)

Collapse
 
shahzebbbbb profile image
Shahzeb Ahmed

Great guide on hosting static websites with Amazon S3! It's such a powerful yet simple way to get started with cloud services. The permissions issue is a common hurdle, but it's great that you shared how to solve it. If you're looking for more scalable hosting with added features like automatic scaling, Cloudways is a great option that integrates easily with AWS for advanced setups. Keep up the good work!