Simple Guide to Hosting a Static Website with AWS S3 Bucket Storage

Introduction

Hosting a static website on Amazon S3 (Simple Storage Service) is one of the simplest and most cost-effective ways to get your site online. Whether you’re a beginner exploring cloud services or a developer deploying lightweight web applications, S3 offers a scalable, secure, and highly available platform for serving static files such as HTML, CSS, JavaScript, and images.

In this tutorial, we’ll walk through the step-by-step process of setting up a static website using Amazon S3. You’ll learn how to:

• Create and configure an S3 bucket

• Upload your website files (using the Ceevee template as an example)

• Enable static website hosting

• Configure permissions and bucket policies to make your site publicly accessible

• Retrieve and use the S3 Website Endpoint to view your deployed web app

By the end of this guide, you’ll have a fully functional static website hosted on AWS S3—accessible from any browser with a simple URL.

---

Navigate to the AWS console and search for the S3 bucket, and click on it.

Click Create bucket button.

Give it a name, uncheck block all public access, and leave everything in it default, and click create bucket.

Double-click on the bucket created.

Click on the upload button.

Click on Add folder to upload a folder.

A pop-up to your file explorer will show, select your folder for your web app. We are using the Ceevee template we downloaded from the Ceevee website for the purpose of this class.

Click on the upload button.

After successfully uploading.

Navigate back to the S3 bucket, click on properties, and scroll down to find static website hosting.

Click on the Edit button.

Below static website hosting, select Enable.

Below the Index document box, type index.html.

Below the Error document box, type error.html.

Click on Save Changes.

Come out of static website hosting after enabling.

Under static website hosting, you will see a URL named bucket website endpoint. which is used to view your website in a browser.

Copy the URL and paste it into the browser to see if the web app will open.

It will show an error because we have not set a policy yet.

Navigate to permissions beside properties in the S3 bucket tab.

Scroll down to the bucket policy and click on the edit button.

Copy the bucket ARN and save it somewhere.

Click on policy generator….it will automatically bring you to a new browser.

On the select type of policy dropdown, select S3 bucket policy.

On the principal box type *

In the actions box dropdown, select Get object.

On the Amazon resource name (ARN), paste the bucket ARN we copied earlier (your bucketARN +/*)

Click on generate policy.

A Json script will pop up, copy it, and go back to permissions on the bucket policy and paste it in the policy box.

Click on save changes.

Refresh your browser, and your website will show.

Or go to properties under static website hosting and copy the bucket url endpoint.

SUCCESS……

Join me on this cloud adventure and elevate your tech skills! Sign in to the Azure portal, follow my easy instructions, and unleash the power of being in the cloud.

Subscribe to my blog for more tech tips and tricks that will keep you ahead in the digital game. Your journey to mastering Cloud computing starts here!

🌟 Thank you for being a part of this incredible journey! Together, let's unlock new opportunities and make the most out of our digital experiences. Happy computing! 🌟