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
elm-pages
applications to AWS S3 static website hosting. I plan to write four posts:
Deploying an
elm-pages
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
elm-pages
. 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
what
has done for
.

Create an S3 Bucket

I will assume that you have an
elm-pages
project and that you have an AWS account. If you are looking for a starting point with
elm-pages
, 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
all
public access" checkbox.
Set public access
Review your options in the last step, and create the bucket.

Upload Your Blog

Build your
elm-pages
project.
Find the bucket you created in the list of buckets, and upload all of the files from the
dist/
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
index.html
for the index and error documents.
Set public access
We use
index.html
in both fields so that
elm-pages
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
amazingdomain.com
with the name of your bucket.
This policy allows anyone to make a
GET
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
s3:GetObject
action corresponds to a
GET
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
elm-pages
blog should be live!

Next Time

Thanks for reading! If you have any questions or corrections, please contact me @bgins on the Elm slack channel or
on Twitter.
In the next post, I will cover custom domains, certificates, and Cloudfront distributions.