Deploying elm-pages to S3 Static Hosting, Part I
November 2nd, 2019
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:
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.
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
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.
Upload Your Blog
Find the bucket you created in the list of buckets, and upload all of the files from the
directory of your project.
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.
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!
Thanks for reading! If you have any questions or corrections, please contact me @bgins on the Elm slack channel or
In the next post, I will cover custom domains, certificates, and Cloudfront distributions.