I recently found myself staring at a folder full of HTML, CSS, and JavaScript files—my latest online project was about to go live. But then came the scary question: How do I launch this static web application without getting bogged down in server maintenance and complicated configurations?

I wanted a solution that was easy, affordable, and scalable. I'd heard of several hosting providers, but most looked overkill for a simple static website. Upon research, I came across AWS Serverless technologies, notably Amazon S3. Skeptical yet intrigued, I decided to give it a try. I'm pleased I did because it worked out to be the ideal option.

This blog will demonstrate how to solve this problem using AWS Serverless technology, specifically by leveraging Amazon S3 (Simple Storage Service) to host a static website.

Understanding AWS Serverless

AWS Serverless is a cloud-native development model that allows developers to build and run applications without thinking about servers. While servers still exist, AWS handles all the server settings, maintenance, and scaling. You simply focus on your website code.

Understanding Amazon S3 Buckets

An Amazon S3 bucket is a cloud storage resource available in AWS's Simple Storage Service (S3), which is an object storage service offering scalability, data availability, security, and performance. It provides Static website hosting where you can host your application serverless.

Note: The homepage of your document should be specified as index.html

Why Use S3 Buckets for Static Websites?

• Perfect for hosting HTML, CSS, JavaScript, images, and other static files.
• Designed for high durability.
• Pay only for the storage you use.

Step-by-Step Guide

1. Setting Up AWS Account

An AWS account. If you don't have one, you can create a Free AWS Account.

2. Visit AWS Management Console

Go to the AWS Management Console and search for S3.

3. Create a new Bucket

On the S3 homepage, you will see an option to create a new bucket for your website. Click on it.

Create a bucket with a default setting but be very careful while choosing the name for the bucket because it can not be changed in the future.

4. Upload your website to Bucket

After creating the bucket, click on it to access the option to upload files. Click the Upload button and add the website repo/folder in your bucket and upload them. Again make sure to rename your homepage as index.html

5. Click on the Website Link

After uploading the files, you visit your website folder and there you can see all the files including index.html and if you click on Index.html you'll see a webpage link named as Object URL.

But clicking on it will result in the following error.

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>04JFN7P4G3PAKWRX</RequestId>
<HostId>Kdv84AFKxknddRTFla2/aeGypn/pqig7MRHi9QtVk1PD2IMoVAxG59+gI4+R8Svlv8fDQ7l3x6k=</HostId>
</Error>

Why so?

In creating the bucket, we set the bucket permissions to not allow public read access, preventing users from accessing your files.

5. Update Bucket Setting

To access our website publicly we need to do the following two things:

a. Allow Public Access

For this, you need to visit your bucket and then click on Permission and edit Block public access (bucket settings) and uncheck Block all public access

b. Update Bucket Policy
In the same permission tab, you see an option for bucket policy. On that bucket policy add the following policy and save changes.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Note: You need to update your Resource with your bucket name in the above code

6. Check Index.html

After completing all the steps, navigate to your website folder and click on the index.html file.

You'll find the previous link there—click on it, and this time, you'll see your application running on a cloud serverless platform with minimal effort.

Conclusion

Hosting a static website with AWS S3 is an easy and quick solution. By creating a bucket, uploading your files, and adjusting relevant settings, you can quickly deploy your site without worrying about server management. It’s a simple and efficient way to launch a static website using AWS Serverless technologies.