Building a Static Website with AWS S3: A Step-by-Step Guide

In today’s post, we’re going to explore how you can leverage Amazon Simple Storage Service (S3) to create and host a static website. Follow along as we break down the process into simple, actionable steps.

What is a Static Website?
A static website consists of web pages with fixed content, typically coded in HTML, CSS, and JavaScript. Unlike dynamic websites, which generate content on the server-side, static websites deliver pre-built files directly to the user’s browser.

Why Use AWS S3?
Amazon S3 provides a cost-effective and highly scalable solution for hosting static websites. With S3, you can store your website files securely, benefit from high availability and reliability, and take advantage of AWS’s global content delivery network (CDN) for fast content delivery to users worldwide.

Step-by-Step Guide to Creating a Static Website with AWS S3

Step 1: Prepare Your Website Files

Download the necessary HTML, CSS, JavaScript, and other assets for your static website here: https://drive.google.com/drive/folders/1wmWMvpUIefdQ3nrtpFrMH4uCTm2IQqsv

Step 2: Upload Your Website Files to S3

Sign in to the AWS Management Console and navigate to the Amazon S3 service.

Click create a new S3 bucket by clicking on the “Create bucket” button.

Choose a unique bucket name and select the region where you want to store your data.

Leave all other settings at their default values, Scroll down and click “Create bucket.”

Once the bucket is created, open it and click on the “Upload” button.

Select your earlier dowloaded website files from your local machine and upload them to the S3 bucket.

Step 3: Configure Bucket Permissions

In the bucket tab, navigate to the “Permissions” tab to edit the “Block public access option”

Untick the “Block all public access” option and save changes

Still on the permissions tab of your bucket, Scroll down and click on “Bucket Policy” to add a policy that allows public read access to your website files.

Copy the bucket policy in JSON below and Replace “your-bucket-name” with the name of your S3 bucket.

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

Click “Save” to apply the bucket policy.

Step 4: Enable Static Website Hosting

Navigate to the “Properties” tab,

Scroll down to the “Static website hosting” section and click on “Edit.”

Select Enable in the “Static website hosting” option and Hosting type as “Host a static website”.

Enter the name of your main HTML file and Error file (e.g., index.html, error.html) as the default document.

The Error file can be optional but since we have the file uploaded earlier, we might as well include it.

Click “Save changes” to enable static website hosting for your S3 bucket.

Step 5: Access Your Website

Once static website hosting is enabled and permissions are configured, S3 will provide a website endpoint URL.

Copy the website endpoint URL and paste it into your browser’s address bar to access your static website.

Congratulations! You’ve successfully created and hosted a static website using AWS S3. Now you can share your website with the world and take advantage of AWS’s scalability and reliability for seamless web hosting.

Stay tuned for more AWS tutorials and best practices to optimize your cloud infrastructure and enhance your web development projects.

Please remember to disable and delete all resources after use so as to not incure cost on your AWS account.