Amazon S3

What is S3?

Amazon S3 is a cloud service for storing files. S3 calls a container a bucket and each stored file an object. An object has a key, which is its name and path inside the bucket. For example, assets/logo.png is an object key.

For a static website, a bucket can hold files such as index.html, CSS stylesheets, JavaScript files, images, and other assets. You can use the same bucket-and-object ideas to store many kinds of files, not just websites.

Step 1: Create a bucket in the AWS console

1. Open Amazon S3 and choose Create bucket.
2. Choose a General purpose bucket. Give it a globally unique name, such as my-static-site- followed by a unique suffix.
3. Choose the AWS Region you plan to use for the rest of this practice.
4. Leave Block all public access selected for now. We will change it in a later step. Leave Object Ownership at Bucket owner enforced.
5. Leave the default encryption setting enabled and choose Create bucket.

Step 2: Upload one PNG image

1. Open the bucket and choose Upload.
2. Choose Add files, find a small PNG image on your computer (for example, sample.png), and select it. Keep the upload permissions and other settings at their defaults; do not add an ACL.
3. Choose Upload. Wait for the status to show that the file succeeded, then close the upload panel.

Back in the bucket’s Objects list, confirm that sample.png appears. The object key is its name in the bucket. The bucket is still private, so opening the object URL may show Access Denied; that does not mean the upload failed. Upload permission and permission to read an object are separate. AWS: upload objects.

Step 3: Make the PNG publicly readable

For this practice, we will make objects in this bucket readable by anyone on the internet. Use only a learning bucket: never store private or sensitive files here. In the bucket, open Permissions, edit Block public access, clear Block all public access, save, and confirm the warning. Then edit Bucket policy and add this read-only policy, replacing YOUR_BUCKET_NAME with the exact bucket name:

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

This grants visitors permission to read objects only; it does not allow them to upload, change, or delete files. AWS’s walkthrough covers these settings and the public-read policy: AWS: configure a static website on S3.

If AWS does not let you save the policy, an account-level setting may still block public access. Ask the account owner to check the account’s S3 Block Public Access settings before changing anything at account level.

To test the PNG, return to Objects, open sample.png, then open its Object URL. The image should appear in your browser. If it does not, confirm that the policy contains the correct bucket name and that public access blocking allows this bucket policy.

Step 4: Upload your completed website folder

1. Choose Upload, then Add folder. Select the folder containing your completed static website.
2. Check that the folder contains index.html plus its stylesheets, scripts, images, and other assets. Keep the folder structure intact, then choose Upload.

After upload, the website files should be at the bucket’s top level. In particular, the key should be index.html, not my-website/index.html. If the entire parent folder appears as a prefix, upload the contents of that folder instead. S3 represents folders as prefixes in object keys. AWS: folders and object keys.

Step 5: Host the website from S3

1. Open the bucket’s Properties tab. Find Static website hosting, choose Edit, then select Enable.
2. Choose Host a static website as the hosting type.
3. Set the index document to index.html. Save changes. S3 will show the bucket’s website endpoint; copy it.

S3 can return the index page from this website endpoint. S3 website endpoints support HTTP, not HTTPS. Later, CloudFront can provide HTTPS and let us keep the bucket private. AWS: hosting a static website using S3 · AWS: website endpoints.

Check your website

Open the website endpoint shown under Static website hosting. You should see the home page load, with its styling and assets. If the page is denied, check that index.html is at the bucket root and that the bucket policy uses the correct bucket name. Remember: this direct S3 website uses HTTP and the files are public. Next, follow the CloudFront setup lesson to serve the site through HTTPS.