The Easy Way to Host a Static Website using AWS S3

Introduction

Static websites are a type of website that offers fixed content, irrespective of user interaction or data, having each page coded in HTML, CSS, and sometimes JavaScript. Unlike dynamic websites, this type of website does not have server-side processing; it is secure, fast, lightweight, and also easy to host.
For businesses and developers, hosting a static website with Amazon S3 (Simple Storage Service) may be the perfect fit and an extremely cost-effective approach. With S3, you will be able to upload static files (HTML, CSS, JavaScript, images, etc.) and serve them directly to the internet without needing a web server.

The Key Characteristics of AWS S3 include:

• Scalable storage: Automatically scales to handle any amount of data.

• High Availability: Your website is available with 99.99% uptime.

• Cost-effective: Pay-as-you-go service, perfect for small and large businesses.

• Static Website Hosting: Directly hosts HTML/CSS/JS files.

• Secure: Provides fine-grained access control and encryption.

Amazon Web Services (AWS) makes it easy and affordable to host static websites with Amazon S3 (Simple Storage Service). Whether you're launching a personal portfolio, a documentation hub, or a sleek landing page, S3 delivers fast, reliable, and scalable performance—no servers, no stress.

This blog serves as a guide to help you launch your static website on the AWS Cloud storage platform — S3.

Prerequisites
There are some basic tools we need to set up to successfully host our static website on AWS, and they are:

• Visual Studio Code. You can download it by clicking on this link (VS code)

• An active AWS account

• The folder containing files (HTML, CSS, and JavaScript) for your website.

  With that being said, let’s dive right into it. First off, we are going to create an S3 storage Bucket that will house our static website.

Step 1: Create an S3 Storage Bucket
We need to navigate to the S3 section on AWS to create our bucket

Once we click on the create button, it will take us to another interface where we will give our bucket a name that is globally unique, choose the policy we wish to set for our bucket, and then create the bucket afterwards.

So here, you give your bucket a name that is globally unique.

In this section, we will need to uncheck the ‘Block all public access’ box. The reason for unchecking this box is so that whoever we give the object URL after we have uploaded folders into the bucket can access the content of that bucket.

We have to check the ‘acknowledge that the current settings might result in this bucket and the objects within becoming public’ box.

Afterwards, we scroll all the way down and click on the create bucket button.

Once we are done creating our bucket, we can then upload our object into the S3 bucket.

Step 2: Upload your Website files to the S3 Bucket

Click into the bucket that has already been created

Use either of the upload buttons to upload the website folder to the bucket

After selecting the files, it will show the actual size of all the content and items in that file, then you click on the upload button.

It usually takes a minute or two to upload this size of folder on the S3 bucket; the time spent to upload folders could vary based on the size of the folder or file.

After successfully uploading our folder, we need to click the cancel button to proceed.

Step 3: Enable the Static Website Hosting and Set Bucket Policy for Public Access

First, click on the properties button, then scroll down to where you have Static website hosting.

Click on the edit button

Select enable under Static website hosting, and also select Host a static website under Hosting type.

Fill in index.html and error.html respectively to enter the document file, then save. Now S3 recognizes this bucket as a website.

Furthermore, we will head over to the permission section

Now that our website folder has been uploaded to the bucket, we will need to edit the permission for this bucket so that it can be accessible to whoever we send the object URL to.

Under the Bucket policy, we will click the edit button then fill in the JSON rule for this permission and save it.

Where we have the highlighted name as victordevbucket, edit it and fill in your own bucket name.
Below, is the JSON rule that we used to establish access to this bucket.

NOTE: JSON (JavaScript Object Notation) is the format used to write rules. It is a lightweight, easy-to-read way to structure data using key-value pairs.

So, when we say “JSON in a bucket policy,” we mean a set of access rules written in JSON format that tells the cloud service who can do what with your bucket.

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

After filling in the JSON rule, we save and go ahead to access our website.

Step 4: Accessing the Website
Now, we will go back to our object, and click on the index.html button

Navigate to the Object URL, copy the url and paste it in your web browser — Voilà! you have you website Live .

SUMMARY

Using the AWS S3 to host a static website provides a high-quality, and affordable solution for developers and businesses who want to serve powerful content on the web quickly. In this blog, we have covered how painless and stress free it is to serve static sites (such as an HTML/CSS/JavaScript single-page app or a static blog) from an S3 bucket without having to manage traditional servers. Backed by flexible and endless scalability, high availability, and integration with services such as Cloudfront and Route 53, AWS S3 makes it easy for users to securely deploy globally available websites with a small investment profile. S3 is fast, durable, and scalable, whether you’re building a small personal site, a global production system, or anything in between.