Setting up a static website using AWS Cli

AWS S3 Hosting • October 20, 2022

If you want to set up a simple and static website, you don't need to think about anything more than just a place to put the files on. which S3 can provide easy and, also important, cheap.

Considerations:

I assume you already have the aws-cli on your computer
My aws-cli have a few credentials on it, so I will always call the profile benjatech. If you have only one credential you can remove the --profile benjatech argument, and if you want to use it, please replace your profile name on the commands.
My bucket will be called benjatech.com, your MUST replace it with a bucket name that makes sense for your project.

Setting up the bucket

Creating the bucket

First we must create the bucket in our AWS account:

1aws --profile benjatech s3api create-bucket --acl public-read --bucket benjatech.com --region us-east-1

Setting the static website

Just creating the bucket is not enough, though. We need to tell AWS that we will use it as a static website.

1aws --profile benjatech s3api put-bucket-website --bucket benjatech.com --website-configuration '{"IndexDocument": {"Suffix": "index.html"}}'

Note that you can also add an error page for your static site, for the sake of simplicity, I will not do it here. Your should take a look at: https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-website.html

Configuring the policy

We now need to config the bucket to accept a get from the public.

Note that inside the policy there is the line arn:aws:s3:::benjatech.com/*, you must change the bucket name for the one you are using, otherwise you will receive an error that resource doesn't exist.

1aws --profile benjatech s3api put-bucket-policy --bucket benjatech.com --policy '{"Version": "2012-10-17","Statement": [{"Sid": "PublicReadGetObject","Effect": "Allow","Principal": "*","Action": ["s3:GetObject"],"Resource": ["arn:aws:s3:::benjatech.com/*"]}]}'

Testing

Creating the file

Now, let's create a dummy html file to see if S3 is providing our website as expected.

Create an html file name index.html wit the following content:

1<html>
2<body>
3<h1>Worked!</h1>
4</body>
5</html>

Uploading the file

As simple as:

1aws --profile benjatech s3api put-object --bucket benjatech.com --key index.html --body ./index.html --acl public-read

Accessing it

You can call the url: http://benjatech.com.s3-website.us-east-1.amazonaws.com/

Or the one you configured: http://{bucket-name}.s3-website.{region}.amazonaws.com/

Note that the website you can find in the AWS console will only download your index.html. There is a small change that needs to be made, which is the dot before the region (not a dash).

For instance:

http://benjatech.com.s3-website . us-east-1.amazonaws.com/ (correct one)

http://benjatech.com.s3-website - us-east-1.amazonaws.com

Uploading your website

If everything is working as expected, now is the time to upload you whole website (as I believe you don't want to upload file by file, right?).

Copying a whole folder to s3:

1aws --profile {your profile} s3 cp {origin folder} s3://{your bucket name} --recursive

For instance:

1aws --profile benjatech s3 cp ./benjatech-master s3://benjatech.com --recursive

Syncing

If you want to sync your local folder with the s3 folder, so every local change will also be reflected in your site, you can use the following command:

1aws --profile {your profile} s3 sync {origin folder} s3://{your bucket name}

For instance:

1aws --profile benjatech s3 sync ./benjatech-master s3://benjatech.com