How to Use an Amazon S3 Bucket to Host a Static Website and It’s Benefits

In this article we will be demonstrating how to use an AWS S3 Bucket to host a static website. The purpose of this demostration will be to show the ease of deployment and the numerous benefits this brings including: Cost-Savings, Improved Scalabilty, High Availability, and Reduce Management. For this example we will be using a fictious scenario of how S3 could be ultilzed by a company. We will showcase each step in detail that will be needed to launch our S3 bucket and host a static website. Additionally we will show as a bonus step how we can use CloudFront to better optimize our users’ experience.

Scenerio

Level Up Bank is a fictitious startup that offers digital banking services to customers. The company’s website is the primary method that they acquire new customers, provide them with information about the services offered, and serving as the primary platform for them to interact with the bank. Currently, the website is hosted on an on-premises server, which requires a dedicated IT team to manage and maintain it. This creates additional costs for the company, and also adds a level of complexity to the infrastructure. To address these challenges, Level Up Bank has decided to move its website to AWS S3.

Prerequisites

• IAM User Role
• index.html File (for this demonstration we won’t worry on how to write our file. This can be covered at a latter time)
• Optional: Access to CloudFront to take advantage of Edge Caching to better improve global performance and security.

Step One- Launching S3

Select your zone of availabilty and then type S3 into your AWS Console and and select the first option

Step Two- Creating our Bucket

Click on create bucket and then begin to configure the bucket.

You will first need to select a bucket type. The default option is General purpose so we leave this option as is. Next we will need to create a unique Bucket name. For our example we will be using my-demo-bank-s3

Next you will leave all settings as their default options until we get to a section asking us if we want to allow public access. We will set this bucket policy to allow all public access. We will need this setting in order for Level Up Bank’s customers to be able to access their website via the internet.

This is the default screen we will need to change this in order for our static website to work

This is what our screen should look like in order to host our static website

After selecting to make our bucket public we continue to ignore all other settings and proceed to create our bucket.

Step 3- Editing Permissions and Making a JSON Bucket Policy

After creating our S3 bucket we will be greeted by a screen that will look like this. But we aren’t finished yet. Next we will need to edit our permissions to ensure that the public can reach our website. To do this we will need to first click on our newly created S3 bucket under the General purpose buckets tab, and then go to the permissions tab.

As we can see Block all public access is turned off, but this wont be enough to ensure Level Up Bank’s customers will be able to access their website. We will need to create a bucket policy in a JSON format that will allow the general public to access the website. Thanks to the easy of using S3, AWS provides us a simple-to-use policy generator to create our JSON document.

Click on Edit to start on our JSON document

This will generate a screen that looks like this with a Bucket ARN. We will need need this ARN later. For now we will click on policy generator. This will launch a screen that looks like this:

This is the default screen when launching the Policy Generator so we will need to make some changes

We will first select the type of policy we would like to use. Since we are working with S3 will will select an S3 Bucket Policy. Next we will need to need to eneter a Principal value. Because we want the general public to have access to our website we will type * into the Principal field. After doing this we will select an action. In order for our static website to function as required for our demostartion we will select getobjects.

Next we will paste our Bucket ARN from before and add /* to the end of it to make it publicly accessible.

Go ahead now and click on add statment and then press generate policy as the bottom. This will generate our JSON document and should look similar to this:

Now we can go back and paste this into our Bucket Policy.

After doing so click on save changes in the bottom right hand corner of the Bucket Policy tab.

Step 4- Enabling Properties to Host Static Website and Uploading Our Index.HTML File

Now that our S3 Bucket has been properly formatted to allow Level Up Bank’s customers to have access to visit their website we must enable static website hosting, and then upload an index.html file to our bucket. To enable static website hosting click on the properties tab of our S3 bucket and scroll to the bottom the page. From their click on edit.

Now we will select Enable, Host a static website, and in the Index document field type index.html Scroll to the bottom of the page and click save changes. After doing so, click on the Objects tab and then click on Upload.

For our example case we will assume that a programmer on another team has already provided us an index.html file to use. Since this is the case we will now upload our file which will bring us to a screen that looks like this:

Next we will click on add files, select our index.html file that was provided to us, and then scroll to the bottom of the page and press Upload

Step 5- Visting our Website

We are at the finish line now. Our website is ready to go. From here will will go back Properties tab and go back to where we enabled our static website hosting. There should now be a bucket website endpoint link that looks like this:

If we go ahead and copy the link and paste into a web brower we will be able to see our webpage!

Summary

As shown S3 offers a simple solution to a real problem that affects many companies. The benefits of S3 include:

1. Cost savings: Hosting a static website on AWS S3 is more cost-effective compared to using an EC2 or on-premises server. This is because AWS S3 charges only for the amount of storage used, and the cost of data transfer is also minimal. On the other hand, an EC2 instance requires additional expenses for compute power, storage, and data transfer.

2. Improved scalability: AWS S3 provides automatic scalability without requiring any additional effort from the company. If the website receives more traffic, AWS S3 can easily handle the increased load without any downtime.

3. High availability: AWS S3 offers high availability and durability, ensuring that the website is accessible to users at all times. This is achieved through the use of multiple availability zones and redundancy.

4. Reduced management overhead: Since AWS S3 is a fully managed service, Level Up Bank can reduce the burden of managing and maintaining the website. This frees up the company’s IT team to focus on more critical tasks, such as developing new banking features and improving customer experience.

That said in the real world we wouldn’t want to only use S3 to host our Static Website We would want to use AWS CloudFront with our S3 bucket to ensure protection from DDoS attacks, provide better read performance, and overly better user experience. We will cover using CloudFront in a later post.