Publish a static website on AWS S3

Out of curiosity I tested deploying a static website on Amazon Web Services (AWS) Simple Storage Service (S3). As the official Amazon provided instructions for setting up a website at S3 are quite long, Here’s notes about how to get it done in a few minutes.

Create an AWS account (if you don’t have one)

In case you don’t already have an AWS account, you need to create one. In case you have an account and an associated Access Key then you can skip this part:

1. Create an AWS account
2. Take note of the Access key that you get during account creation (or create another one)

Install AWS CLI

The AWS CLI or command-line interface enables quick and scriptable access to AWS services. For power users learning to use the command-line speeds things up in the long run significantly even if using the CLI might initially feel tedious:

Install AWS CLI

Creating the S3 bucket for your website

Finally we’ll create an S3 bucket (like a “directory”) to host the website, set access policy on it to allow anonymous access and finally create a “Hello World” message to show up on the website.

• The REGION variable below can be one of: https://awsregion.info/
• The BUCKET-NAME variable below is what you want to name your bucket/directory. It will appear in the address of your website and must be unique within the AWS S3 region selected above.

For Linux/Mac (Bash script)

The following works at least on Ubuntu 22.04. Probably will work on other Unix/Linux variants and Mac/OSX as well when used in Bash:

BUCKET=BUCKET-NAME
REGION=eu-north-1
aws configure
aws s3api create-bucket --bucket $BUCKET --create-bucket-configuration LocationConstraint=$REGION
aws s3api put-bucket-policy --bucket $BUCKET --policy "{\"Statement\":[{\"Sid\":\"AllowAnonymousRead\",\"Effect\":\"Allow\",\"Principal\":\"*\",\"Action\":\"s3:GetObject\",\"Resource\":\"arn:aws:s3:::$BUCKET/*\"}]}"
aws s3 website s3://$BUCKET --index-document index.html --error-document 404.html
echo 'Hello World' > index.html
echo 'Not found' > 404.html
aws s3 sync . s3://$BUCKET
echo Your AWS S3 hosted website is now live at: http://$BUCKET.s3-website.$REGION.amazonaws.com
open http://$BUCKET.s3-website.$REGION.amazonaws.com

For Windows (.bat script)

I haven’t tested this, but should work for the most part probably:

set BUCKET=BUCKET-NAME
set REGION=eu-north-1
aws configure
aws s3api create-bucket --bucket %BUCKET% --create-bucket-configuration LocationConstraint=%REGION%
aws s3api put-bucket-policy --bucket %BUCKET% --policy "{\"Statement\":[{\"Sid\":\"AllowAnonymousRead\",\"Effect\":\"Allow\",\"Principal\":\"*\",\"Action\":\"s3:GetObject\",\"Resource\":\"arn:aws:s3:::%BUCKET%/*\"}]}"
aws s3 website s3://$BUCKET --index-document index.html --error-document 404.html
echo 'Hello World' > index.html
echo 'Not found' > 404.html
aws s3 sync . s3://%BUCKET%
echo Your AWS S3 hosted website is now live at: http://%BUCKET%.s3-website.%REGION%.amazonaws.com
start http://%BUCKET%.s3-website.%REGION%.amazonaws.com

Result

You’ll now have a website saying Hello world at:
http://BUCKET-NAME.s3-website.REGION.amazonaws.com

How do I update the content of the website

1. Edit your index.html file using whatever editor you want
2. You can add new files/folders to your website structure as necessary
3. Then run: aws s3 sync . s3://BUCKET-NAME in the folder where the website files are located

Pricing

Running a small website on AWS S3 is practially free as you can have 5 GB on S3 for free. Beyond that, it’s approx $0.02-0.04/GB/month depending on which region you choose. For more info, see the AWS S3 pricing page.

Further considerations

1. Running a website from AWS S3 will only enable HTTP access, no HTTPS
2. If you want HTTPS access, you need to route the traffic via AWS Cloudfront
3. If you own a domain, you can point a DNS CNAME record at the AWS website address to have a custom domain like staticsite.mydomain.com for your site

Credits

Header image created using OpenAI DALL·E using the input aws s3 in impressionist style.