How to Host a Static Website on Amazon S3

mundianderi

Serah Nderi

Posted on April 21, 2024

How to Host a Static Website on Amazon S3

Amazon S3 is an object storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve any amount of data from anywhere on the web, making it ideal for a wide range of use cases, from simple storage for backup and archiving to serving static website content and hosting entire applications.

If you’re studying for AWS projects and looking for easy and beginner friendly projects, this is one of them.

To start:

  • Create an AWS account. You will get one year Free to test and use various functions — some are free but some have pay as you go pricing so be careful and do your research.

  • A static HTML site. If you need inspiration or Figma Designs you can explore Frontend Mentor for the designs.

  • VScode and Github to code and store your code.

Create a Bucket

Navigate to Amazon S3 and create a bucket. Every object in AWS S3 is stored in a bucket.

Create objects by uploading your static HTML and related files and folders

You can upload them as files or you can upload them as folders. Use the same file structure as you had in your local machine. I have an additional src file as I’m using Tailwind CSS.

Image description

This is my view after uploading all the files, similar to what I had in my project locally.

Clicking on the associated Object URL on the index.html object view will return an error, because you need to some changes to your bucket configuration.

Image description

To change this, we need to:

  • Enable static hosting. To do that, navigate to properties on your particular bucket view and scroll down to Static Website Hosting. Click on enable and specify the website home or default page, in this case index.html. Save changes.

  • Make the website publicly accesible. To do that, click on permissions and uncheck the block public access box. Save changes and confirm.

  • Within permissions, navigate to Object ownership and make public using ACL.

Image description

To find your object URL, click in the index.html object. You should be able to see the Object URL.
Here’s a look on my static site on AWS S3.

Image description

This is a fairly easy and beginner friendly AWS project especially if you want to study for your AWS Certified Cloud Practioner certificate. You can also add it to your cloud engineer portfolio.

If you liked this article, support me on Patreon. This article first appeared on Medium.

💖 💪 🙅 🚩
mundianderi
Serah Nderi

Posted on April 21, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Host a Static Website on Amazon S3
cloudcomputing How to Host a Static Website on Amazon S3

April 21, 2024