Deploying elm-pages to S3 Static Hosting, Part I

This post is the first in a series about deploying

applications to AWS S3 static website hosting. I plan to write four posts:

Most of the information in this series will apply to any static site, but I am fond of

. Here is what Chrome's Lighthouse audit tool thinks of this page.

I highly recommend

for making fast, accessible static sites. It does for

what

has done for

.

I will assume that you have an

project and that you have an AWS account. If you are looking for a starting point with

, check out

or the source code for this blog at

.

In the AWS management console, find the S3 service and create a bucket.

Pick out a bucket name. S3 buckets exist in a global namespace, and you might need to get creative with your naming. Bucket names must conform to the format described in

.

Once you have selected a name, choose a region and skip forward to the Set Permissions step.

To host a static site that will be available to the world, we need to set public permissions. Uncheck the "Block

public access" checkbox.

Review your options in the last step, and create the bucket.

Build your

project.

Find the bucket you created in the list of buckets, and upload all of the files from the

directory of your project.

Find the "Static website hosting" card in the Properties tab.

Select "Use this bucket to host a website" and enter

for the index and error documents.

We use

in both fields so that

can serve our content and handle errors such as missing pages.

The endpoint is the URL where the site will be served. In the next post, I will show how to set up a custom domain name.

Our bucket is ready to serve static content and we have stated our intent to go public, but we still need to be explicit about what we mean by "public".

We do this by adding a bucket policy in the Permissions tab. Copy this resource policy and replace

with the name of your bucket.

This policy allows anyone to make a

request for any object in the bucket.

Resource policies allow or deny a principal some action on a resource. The wildcard principal in our policy means anyone. The

action corresponds to a

request on an S3 bucket. The wildcard after the Amazon Resource Name (arn) means any object in the bucket.

The "Version" in the policy refers to the policy language version, not the version of what you wrote in the policy. It needs to be there, and you can leave it as is.

Open the Static website hosting endpoint and your

blog should be live!

In the next post, I will cover custom domains, certificates, and Cloudfront distributions.