Getting Started

Amazon Simple Storage Service (Amazon S3) is an cloud based object storage device. It is a low cost storage widely used for the backup or static website content.

In this post, we will take a look at how to deploy a website to an S3 bucket using the AWS cli.

Setup

If you haven’t setup the AWS CLI already.

Check out the references for all of the commands used.

S3 Static Website

Steps for hosting s3 static website are as followed:

1. Create a new bucket with a unique name
2. Enable public access to the bucket
3. Update the bucket policy for public read access
4. Enable the s3 bucket to host an index and error html page
5. Upload website

1. Create New Bucket

aws s3 mb will create a new bucket. Make sure you change unique-bucket-name to something meaningful.

aws s3 mb "s3://unique-bucket-name" 

List buckets

aws s3 ls
2023-01-24 19:46:02 unique-bucket-name

2. Enable Public Access

aws s3api put-public-access-block allows the public access to the bucket. Setting all of the blocks to false to enable public access.

aws s3api put-public-access-block \
    --bucket unique-bucket-name \
    --public-access-block-configuration "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

3. Update Bucket Policy

aws s3api put-bucket-policy allows to specify a bucket policy which has to be written in JSON. This policy will allow anyone to get the objects ot of the bucket.

See Setting permissions for website access

aws s3api put-bucket-policy --bucket devnall-io --policy file://policy.json

policy.json:

{
    "Version": "2023-01-24",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::unique-bucket-name/*"
            ]
        }
    ]
}

4. Enable s3 Bucket to Host

aws s3 website configures the bucket as a website. Need to include an index and an error page. We could specify a single page for both of these. This is usually done with a single page application.

aws s3 website "s3://unique-bucket-name" --index-document index.html --error-document index.html

5. Upload Static Website

aws s3 sync will update the buckets contents with the contents of the local directory.

aws s3 sync directory-path "s3://unique-bucket-name/" 

# Copy a file to an s3 bucket
aws s3 cp path-to-file "s3://unique-bucket-name/filename"

# Copy a file from an s3 bucket
aws s3 cp "s3://unique-bucket-name/filename" path-to-file

s3 vs s3api

• s3api gives complete control of S3 buckets
• s3 gives a higher level of abstraction for some of the more common operations to perform on an S3 bucket

Summary

This post provided you with an overview of setting up a static web site using AWS CLI using a S3 bucket. Hugo will need a little more tweaking in the config.toml with the baseURL = "https://example.com/" to https://unique-bucket-name.s3.us-west-1.amazonaws.com/

Check out the something interesting:

Next in the Series:

• Backup Website to Amazon S3 Shell Script
• Setup Static Website AWS CLI