AWS - Host the website

Publish the website on a static website service in the cloud
AWS

Logon to AWS

For this example I am using AWS CLI V2 that supports AWS SSO sign-on. Meaning when I run the AWS CLI commands it will check if I have a valid token or not. If yes then the commands executes, if not then a new token is retrieved via me being asked to logon to AWS via the website using the SSO credentials. By default this means I need to append --profile {CLI PROFILE NAME} to the end of each command.

AWS CLI Profiles

Create an S3 bucket

Create a new S3 bucket using the following command. Replace {BUCKET NAME} with a unique name for your bucket.

aws s3api create-bucket
    --bucket {BUCKET NAME}
    --region {REGION}
    --create-bucket-configuration LocationConstraint={REGION}
    --profile {CLI PROFILE NAME}

Enable static website hosting

Use the following command to enable static website hosting for your S3 bucket. Replace index.html and error.html with the names of your index and error files, respectively, if using different file or leave them as-is.

aws s3api put-bucket-website
    --bucket {BUCKET NAME}
    --website-configuration '{"IndexDocument": {"Suffix": "index.html"}, "ErrorDocument": {"Key": "error.html"}}'
    --profile {CLI PROFILE NAME}

Upload your website files

Upload your static website files to the S3 bucket using the aws s3 sync command. Replace {/path/to/your/website/files} with the path to your website’s files on your local machine.

aws s3 sync
    {/path/to/your/website/files}
    s3://{BUCKET NAME}
    --profile {CLI PROFILE NAME}

Set public read access to the S3 bucket

Create a bucket policy file named bucket-policy.json with the following content. Replace {BUCKET NAME} with the name of your bucket.

OBS! the {BUCKET NAME} value in the ARN string.

aws s3api put-bucket-policy
    --bucket {BUCKET NAME}
    --policy '{"Version":"2012-10-17","Statement":[{"Sid":"PublicRead","Effect":"Allow","Principal":"*","Action":"s3:GetObject","Resource":"arn:aws:s3:::{BUCKET NAME}/*"}]}'
    --profile {CLI PROFILE NAME}

Access your static website

You can now access your static website using the following URL:

http://{BUCKET NAME}.s3-website-{REGION}.amazonaws.com
image

References

Hosting a static website using Amazon S3

Tutorial: Configuring a static website on Amazon S3

Last modified July 21, 2024: update (e2ae86c)