Eleventy Blog on AWS with S3/CloudFront

In starting this blog, I wanted to use AWS S3/CloudFront. I initially investigated SST (ion specifically). However, I kept running into issues with SST and NixOS, so I bailed on SST and moved directly to Pulumi. Pulumi is a Terraform competitor, and I have been curious to try it out.

They have a static site starter. This is actually a decent start, but I ran into a few problems deploying my new Eleventy Blog. The home page worked fine, but as you drive into sub-folders (like /blog/), I started getting 403 Forbidden errors.

Here’s their original code:

    origins: [
        {
            originId: contentBucket.arn,
            domainName: contentBucket.bucketRegionalDomainName,
            s3OriginConfig: {
                originAccessIdentity: originAccessIdentity.cloudfrontAccessIdentityPath,
            },
        },
    ],

However, this is configuring the CloudFront origin to the s3 domain, not the website endpoint that is actually required. Through much weeping and gnashing of teeth, I finally got this configuration working:

    origins: [
        {
            originId: contentBucket.arn,
            domainName: contentBucket.websiteEndpoint,
            customOriginConfig: {
                httpPort: 80,
                httpsPort: 443,
                originProtocolPolicy: 'http-only',
                originSslProtocols: ['TLSv1.2'],
                originReadTimeout: 30,
                originKeepaliveTimeout: 5,
            },
        },
    ],

In other words, s3OriginConfig can’t be used because you can’t use the websiteEndpoint. You have to switch to a customOriginConfig output instead.

Additionally, when you do this, you can no longer use ACL’s to grant CloudFront access to your s3 bucket – I made it public-read instead. I’m sure there’s a bucket policy that could keep the S3 bucket private, but it’s a public blog anyway.