DEV Community

Caleb Onyejeme
Caleb Onyejeme

Posted on

Hosting a static website on AWS S3 Bucket.

Introduction

In today's digital landscape, having a web presence is essential for individuals and businesses alike. Whether you're showcasing a portfolio, sharing a blog, or launching a small business, a static website can be the perfect solution. But how do you get started? Enter Amazon Web Services (AWS) Simple Storage Service (S3), a powerful and cost-effective platform that makes hosting static websites a breeze.

In this blog post, we'll walk you through the process of setting up your static website on an S3 bucket. With step-by-step instructions and helpful tips, you'll learn how to take advantage of S3’s scalability, durability, and ease of use. By the end, you'll have a fully functional website live on the internet, ready to share your content with the world. Let’s dive in and explore how easy it is to get started with AWS S3!

Prerequisite
1-AWS account
2-Website Files

Now that you have the required tools. Let's Dive in!!

STEP 1
log in to your AWS account
-Go to your web browser and enter https://aws.amazon.com/
create an account if you don't already have or sign in by hitting the the console button

Image description

You will need to provide a billing information, but there's a free tier available for new users

Select to sign in as a Root user if you own the account, otherwise, if given access by an organization or a third party, the select IAM user

Provide your account email and click the Next button.

Image description

STEP 2
Create an S3 bucket.

  1. Access the S3 Console: Go to the AWS Management Console, search for S3, and select it.

Image description

Go ahead and click the 'create bucket' button

Image description

Enter a unique name for your bucket (this must be globally unique).
Choose a region close to your target audience.
Click "Create bucket" (you can leave most settings as default for now).

Image description

-Scroll down on same page.
-Leave the default ACL disabled option.
-Uncheck the Block all public access option.

Image description

You will be prompted with a warning message, but there's nothing to panic about here. It's just a message that reminds you the implications of making the bucket public. You'd have to acknowledge the message and remember to leave all the settings in default, scroll down to the end of the page and hit that Create Bucket button

Image description

Image description

STEP 3: Uploading the web files to the static website.

  • Click on your created bucket nonnycaleb

  • On the bucket page, click the upload button, it will open another panel that will help you navigate to your resources in your local environment.

Image description

Use the add files or add folder button depending on how your web files are saved.

Image description

We will upload our web resources from our local desktop.

Image description

Image description

The uploaded files

The index.html and the error.html or in this instance 404.html. They are the primary pages that display on the website.

Scroll to the bottom of the page and click the Upload button.

Image description

Image description

STEP 4: Set Bucket Permissions

  • Go back to the nonnycaleb S3 bucket and click on the permission button.

Image description

  • Scroll down and click on the edit button then Bucket Policy

Image description

Add the policy below in the editor with your bucket name replacing the place holder. (We got the policy from AWS documentation on S3 static website hosting)

Image description

Scroll down and click on the save changes button, once you have clicked the save button you will be notified that the policy change was successful.
Then Click on property on the same nonnycaleb bucket page.

Image description

Scroll down to the "Static website hosting, click edit

Image description

Select Enable option for Static website
This will extend the pane, exposing boxes for you to input your index.html and error.html configurations.

Leave other configurations as default and click Save Changes button at the base of the page.

You will get this notification of success.

Image description

Image description

Image description

Now at the bottom of the page there will be static website bucket endpoint which we can use to access it over a browser.

Image description

  • Go ahead and copy the endpoint and view the static website.

Image description

Conclusion
That’s it! You’ve successfully hosted a static website on AWS. You can update your website by uploading new files to your S3 bucket whenever needed.

Top comments (0)