Create a static website with Amazon S3

In this tutorial, we will build and host a static webpage on Amazon S3.

Understanding the Basics

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a cloud-based object storage service from Amazon Web Services (AWS). It's designed to store and retrieve virtually unlimited amounts of data from anywhere on the web. Think of it as a super-powered online hard drive for your files.

For more information on S3, check out the video below:

What is a static site?

Static websites are built entirely with HTML, CSS, and maybe some client-side JavaScript. They don't rely on a server to generate content on the fly, making them simple, fast, and often more affordable to host. For more information, see Hosting a static website using Amazon S3.

Set Up Your AWS S3 Static Website

Create an AWS Account and S3 bucket

Create an S3 Bucket: Open the AWS S3 console and create a new bucket. Give it a unique name.

Enable Static Website Hosting

Once your bucket is created, navigate to the Properties tab.

Next, navigate to Static website hosting and click Edit.

Under Static website hosting, select Enable.

Set the index document to index.html.

Make Your Bucket Public

Click the Permissions tab within your bucket's settings.

Scroll down to find the section titled Block public access (bucket settings).

Click the Edit button next to the Block Public Access settings.

Locate the checkbox labeled Block all public access and uncheck it.

Click Save Changes to apply the modifications.

Type confirm into the provided field to verify that you understand the security implications and intentionally wish to make the bucket public. Important: By enabling public access, anyone on the internet will be able to see the files in your bucket. Make sure you only store content intended for public viewing.

Click Save Changes once more to finalize the process.

Apply a Bucket Policy (For Public Read Access)

A bucket policy defines the access permissions for your S3 bucket. In this case, we create a policy to allow public read access for making your website accessible.

In the S3 console, go to your bucket's Permissions tab.

Click on the Bucket Policy section.

Paste the following JSON code into the Bucket policy editor, replacing your-bucket-name with your actual bucket name:


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

Bucket Policy Explanation

This policy is designed to grant public read access to all objects within a specific S3 bucket. This is generally used when hosting static websites on S3.

Here are the key elements of the policy:

Version: "2012-10-17" Specifies the version of the policy language being used.
Statement: [ ... ] This is an array containing one or more individual policy statements. In this case, we have a single statement. Let's break down that statement:
Sid: "PublicReadForGetBucketObjects" A "Statement ID", a simple identifier or label for this particular statement.
Effect: Allow Determines whether the statement grants permissions (Allow) or denies them (Deny).
Principal: "*" Specifies who the policy applies to. The asterisk (*) means "everyone" (i.e., public access).
Action: s3:GetObject The specific Amazon S3 action that's being allowed. In this case, it's the ability to read/retrieve objects from the bucket.
Resource: "arn:aws:s3:::your-bucket-name/*" The Amazon Resource Name (ARN) specifying the S3 bucket and objects to which this policy applies. You'll need to replace "your-bucket-name" with your actual bucket name. The asterisk at the end (*) means all objects inside the bucket are affected.

Apply Bucket Policy

Click Save to apply the bucket policy.

Upload and Access Your Website

Upload your HTML files and any other assets (images, videos, diagrams) to the S3 bucket.

Access your website using the endpoint provided by Amazon S3. It will look something like http://your-bucket-name.s3-website.your-region.amazonaws.com.

Additional Notes

You can use any text editor to create your HTML files.

You can upload images, videos, and other assets to your S3 bucket.

Once you are done with your website, you can delete the S3 bucket to remove it from the internet.