How to Host a Static Website on AWS S3?

Hosting a Static Website on AWS S3 has a lot of benefits. Additionally, you must complete some steps correctly while hosting your website on S3.

Today in this article, we will explore the benefits of hosting a static website on AWS S3, how it works, and the step-by-step hosting guide. So please stick with us to know everything about AWS S3.

What is Amazon S3?

Before diving deep into it, clear all the basics first.

Amazon Simple Storage Service, known as Amazon S3, is an object storage service that offers industry-leading scalability, security, performance, and data availability.

Mainly Amazon S3 is used on static websites, separate web pages including static content.

Benefits of Hosting a Static Website on AWS S3?

Storage Classes

According to your use cases, Amazon S3 offers you a specified range of storage classes, which helps you archive data at the lowest costs.

In the Amazon S3 bucket, you can choose a service per your data and cost, like, S3 Glacier Flexible retrieval, S3 Glacier Instant Retrieval, S3 Glacier Deep Archive, and more.

Storage Management Service

In storage management service, you can manage costs, reduce latency, manage regulatory requirements, etc.

Additionally, you can easily save multiple copies of your data for compliance requirements.

Data Processing

To automate the workflow and trigger the data transfer, you can use AWS S3 object Lambda and Event notifications features.

To trigger workflows, Amazon Simple Notification Service (Amazon SNS), AWS Lambda, and Amazon Simple Queue Service (Amazon SQS) are made for Amazon S3.

Access Management

Auditing and managing access to your buckets and objects is one of the great features of AWS S3. You have access only to the S3 bucket that you create.

By default, the S3 bucket and the object in them are private.

Read More about: Cost-effective Use cases & Benefits of Amazon S3

How to Host a Static Website on AWS S3? Step-by-Step Guide

2. Sign up and create a bucket in Amazon S3
3. Enable the public to read permission for the bucket
4. Configure Static website hosting for your bucket.
5. Upload static website code
6. Validate the code if there are any errors.
7. If you are still confused, Adex is here to help you.

Sign up and Create a Bucket in Amazon S3

You must need an AWS account. To create an AWS account, first Click here. Once you have completed the sign-up process, you must configure your S3 storage service to host your static website.

Read more about: What is serverless computing AWS?

After that, to create the bucket, click on Create Bucket and give a name to your bucket. Be careful: If your website name is www.websitename.com, your bucket name must be www.websitename.com.

For those unaware of the Amazon S3 bucket, the bucket is a container for the objects stored on AWS S3.

Enable the Public Read Permission for the Bucket

AWS doesn’t allow public read permission on the S3 bucket by default, so you must do it manually.

On the permission tab, you see the default behavior is blocked public access, which you need to change to public access. Below is the process of how to give the public read permission.

You can also manage permission by adding the below code to your bucket policy page.

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: ““, “Action”: [ “s3:GetObject” ], “Resource”: [ “arn:aws:s3:::Bucket-Name/“
]
}
]
}

Remove the tick icon ahead of Block all public access. It also warns you while removing the tick, and you need to acknowledge that you operated by yourself intentionally.

Additionally, you need to add a bucket policy to grant public read access to anyone on the internet. Here’s a short guide on how to create a bucket policy:

1. 1. Choose the bucket that you want to change or add a privacy policy.
   2. Click on permission
   3. Under bucket policy, click edit.
   4. After that, click on the policy generator to generate the bucket policy, or you may manually create the bucket policy.
   5. Select the type of policy for your S3 bucket on the AWS policy generator page.
   6. Add all the information in the provided field and hit on add statement button.
   7. After that, click on generate policy and copy the approach.
   8. Return to the edit bucket policy and paste the code you copied in the previous step.
   9. After completing all the steps correctly, hit the save changes button, which redirects you to the bucket permission section.

Configure Static Website Documents for Your Bucket

As your website can be public, you must configure static website hosting for the bucket you created in the previous steps.

To configure your static website for your bucket, you need to create or name the document index.html. The step-by-step guide uploads your document on the S3 bucket with the index.html name below.

Upload Static Website Code

First, create an index.html file. Note that it’s case sensitive, so don’t create using an upper case like Index.Html must use ‘index.html.’

And then save the file index locally.

Now it’s time to enable static website hosting for the bucket. There are two ways to do this:

1. 1. Into the console bucket listing, drag and drop the file you created in the previous step.
   2. Click on the upload button and follow all the steps correctly.

Validate your Code if there are any errors

If you followed all the above steps correctly, there might be no errors. However, validating once is a better idea before going live. Here’s how you validate your website code.

1. 1. Choose the name of your bucket.
   2. Choose properties.
   3. Under the Static website hosting, choose your Bucket Website Endpoint.
   4. If your index website opens in a new tab, it’s okay. There’s no problem. If not, you may follow all the above steps once again.