Creating a Static Website on Amazon S3: A Step-by-Step Guide Using Amazon CLI

In today’s digital age, hosting a website doesn’t always require complex server setups or expensive hosting plans. With Amazon S3 (Simple Storage Service), you can host a static website quickly, securely, and cost-effectively. In this blog, we’ll walk through a hands-on lab where we’ll use the AWS Command Line Interface (AWS CLI) to create an S3 bucket, configure permissions, upload website files, and automate updates. By the end of this guide, you’ll have a fully functional static website hosted on Amazon S3!

Creating a static website on Amazon S3 can be done using either the AWS Management Console or the AWS CLI, depending on your preferences and needs. The console is perfect for beginners or those who prefer a visual interface, while the CLI is ideal for advanced users and automation.

What You’ll Learn

In this lab, you’ll learn how to:

1. Use the AWS CLI to interact with Amazon S3 and IAM.
2. Create an S3 bucket and configure it to host a static website.
3. Upload website files to S3 and make them publicly accessible.
4. Automate website updates using a batch script.

Key Concepts

Before diving into the lab, let’s familiarize ourselves with some key concepts:

1. Amazon S3

Amazon S3 is a scalable object storage service that allows you to store and retrieve data from anywhere on the web. It’s perfect for hosting static websites because it’s cost-effective, highly available, and integrates seamlessly with other AWS services.

2. Static Website

A static website consists of fixed content (HTML, CSS, JavaScript, and images) that doesn’t require server-side processing. Examples include portfolios, blogs, and landing pages.

3. AWS CLI

The AWS CLI is a command-line tool that allows you to interact with AWS services directly from your terminal. It’s a powerful tool for automating tasks and managing resources.

4. IAM (Identity and Access Management)

IAM is a service that helps you manage access to AWS resources securely. You can create users, assign permissions, and control who can access specific services.

Lab Overview

In this lab, we’ll:

1. Install an Amazon CLI.
2. Configure the AWS CLI with credentials.
3. Create an S3 bucket and configure it to host a static website.
4. Create an IAM user with full access to S3.
5. Upload website files to S3 and make them publicly accessible.
6. Create a batch script to automate website updates.

Step 1: Install an Amazon CLI

1. Download the AWS CLI Installer

• Run the following command to download the AWS CLI installer:

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"        

2. Unzip the Installer:

• Run the following command to unzip the installer:

unzip -u awscliv2.zip        

3. Install the AWS CLI:

• Run the following command to install the AWS CLI:

sudo ./aws/install        

4. Verify the Installation:

• Run the following command to confirm the installation:

aws --version        

Step 2: Configure the AWS CLI

Configure the AWS CLI with credentials to interact with AWS services.

Steps

1. Run the aws configure command:

• In the terminal, run:

aws configure        

2. Enter Configuration Details:

• AWS Access Key ID:
• AWS Secret Access Key
• Default region name
• Default output format e.g json

Step 3: Create an S3 Bucket

Create an S3 bucket to host the website.

Steps

1. Run the create-bucket command:

• Replace <bucket-name> with a unique name (e.g.,twhitlock256):

aws s3api create-bucket - bucket <bucket-name> - region us-west-2 - create-bucket-configuration LocationConstraint=us-west-2        

• Example:

aws s3api create-bucket - bucket sansbucket1212 - region us-west-2 - create-bucket-configuration LocationConstraint=us-west-2        

2. Verify the Bucket Creation:

• A JSON response with a Location field confirms the bucket was created.

Step 4: Create an IAM User with Full Access to S3

Create an IAM user and grant it full access to Amazon S3.

Steps

1. Create the IAM User:

• Run the following command:

aws iam create-user - user-name awsS3user        

2. Create a Login Profile:

• Run the following command:

aws iam create-login-profile - user-name awsS3user - password userpassword        

3. Attach the S3 Full Access Policy:

• Find the S3 full access policy:

aws iam list-policies - query "Policies[?contains(PolicyName,'S3')]"        

[
{
    "PolicyName": "AmazonS3FullAccess",
    "PermissionsBoundaryUsageCount": 0,
    "CreateDate": "2015-02-06T18:40:58Z",
    "AttachmentCount": 0,
    "IsAttachable": true,
    "PolicyId": "ANPAIFIR6V6BVTRAHWINE",
    "DefaultVersionId": "v2",
    "Path": "/",
    "Arn": "arn:aws:iam::aws:policy/AmazonS3FullAccess",
    "UpdateDate": "2021-09-27T20:16:37Z"
},
{
    "PolicyName": "AmazonS3ReadOnlyAccess",
    "PermissionsBoundaryUsageCount": 0,
    "CreateDate": "2015-02-06T18:40:59Z",
    "AttachmentCount": 0,
    "IsAttachable": true,
    "PolicyId": "ANPAIZTJ4DXE7G6AGAE6M",
    "DefaultVersionId": "v3",
    "Path": "/",
    "Arn": "arn:aws:iam::aws:policy/AmazonS3ReadOnlyAccess",
    "UpdateDate": "2023-08-10T21:31:39Z"
},
]        

• Attach the policy to the user:

aws iam attach-user-policy - policy-arn arn:aws:iam::aws:policy/AmazonS3FullAccess - user-name awsS3user        

Step 5: Adjust S3 Bucket Permissions

Make the S3 bucket publicly accessible.

Steps

1. Disable Block Public Access:

By default, Block Public Access is enabled for all new S3 buckets, which means that even if you configure your bucket or objects to be publicly accessible, the settings will be blocked unless you explicitly disable this feature.

Disabling Block Public Access is a necessary step when hosting a static website on Amazon S3. It allows your website’s files to be publicly accessible, enabling users to view your content over the internet.

• In the AWS Management Console, navigate to the S3 bucket.
• Go to Permissions > Block public access > Edit.
• Uncheck Block all public access and save.

2. Enable ACLs:

Enabling ACLs is a critical step when hosting a static website on Amazon S3. It ensures that your website’s files are publicly accessible, simplifying the process of serving content to users.

When hosting a static website on S3, the HTML, CSS, JavaScript, and image files stored in your bucket need to be accessible to anyone visiting your website. By enabling ACLs, you can grant public read access to these objects, allowing users to view your website content without requiring authentication.

• Go to Permissions > Object Ownership > Edit.
• Select ACLs enabled and save.

When uploading files to your bucket, use the --acl public-read flag to make the objects publicly accessible:

Step 6: Upload Website Files to S3

Upload the website files to the S3 bucket.

Steps

1. Enable Static Website Hosting:

• Replace <my-bucket> with your bucket name:

aws s3 website s3://<my-bucket>/ - index-document index.html        

2. Upload the Files:

• Run the following command:
• The cp command copies the local files as shown to the Amazon S3 bucket. The --acl public-read flag is used to make the objects publicly accessible:

aws s3 cp /home/ec2-user/sysops-activity-files/static-website/ s3://<my-bucket>/ - recursive - acl public-read        

3. Access the Website:

• In the AWS Management Console, go to the S3 bucket.
• Under Properties, copy the Bucket website endpoint URL and open it in a browser.

Step 7: Automate Website Updates

Create a batch script to automate website updates.

Steps

1. Create the Script:

• Run the following commands:

cd ~ touch update-website.sh vi update-website.sh        

• Add the following content (replace <my-bucket> with your bucket name):

#!/bin/bash 
aws s3 cp /home/ec2-user/sysops-activity-files/static-website/ s3://<my-bucket>/ - recursive - acl public-read        

• Save and exit (Esc > :wq > Enter).

2. Make the Script Executable:

• Run the following command:

chmod +x update-website.sh        

3. Run the Script:

• Make changes to your website files and run:

./update-website.sh        

Use aws s3 sync (Optional)

Use the aws s3 sync command to upload only modified files.

Steps

1. Modify the Script:

• Replace the aws s3 cp command with:

aws s3 sync /home/ec2-user/sysops-activity-files/static-website/ s3://<my-bucket>/ - acl public-read        

2. Test the Script:

• Make a small change to index.html and run the script.
• Observe that only the modified file is uploaded.

Conclusion

Congratulations! You’ve successfully:

• Created an S3 bucket and configured it to host a static website.
• Uploaded website files and made them publicly accessible.
• Automated website updates using a batch script

Hosting a static website on Amazon S3 is a powerful, cost-effective, and scalable solution for developers, businesses, and hobbyists alike. By leveraging S3’s simplicity and integration with other AWS services, you can quickly deploy a website that is highly available, secure, and performant. In this blog, we walked through the process of creating an S3 bucket, configuring it for static website hosting, uploading files, and automating updates using the AWS CLI.

Next Steps

Now that you’ve mastered hosting a static website on S3, consider exploring my other articles on:

• Amazon CloudFront for faster content delivery.
• AWS Lambda for adding dynamic functionality to your website.
• Route 53 for custom domain routing.

Happy hosting! ??