Deploying elm-pages to S3 Static Hosting, Part I

November 2nd, 2019
Blog post cover photo
Image by maxizapata of pixabay
This post is the first in a series about deploying
applications to AWS S3 static website hosting. I plan to write four posts:
Deploying an
blog to S3 static website hosting
Setting up a custom domain name and a Cloudfront distribution
Setting up CI/CD with CodePipeline
Doing it all with Cloudformation
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.
Lighthouse report
I highly recommend
for making fast, accessible static sites. It does for
has done for

Create an S3 Bucket

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
Good bucket name
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.
Set public access
Review your options in the last step, and create the bucket.

Upload Your Blog

Build your
Find the bucket you created in the list of buckets, and upload all of the files from the
directory of your project.
Set public access

Enable Static Website Hosting

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.
Set public access
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.

Add a Bucket Policy

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.

Visit your Blog

Open the Static website hosting endpoint and your
blog should be live!

Next Time

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