I went the other way because splitting my environments, variables, etc wasn't worth it

Either I'm doing it wrong or having static html isn't really doable. https://github.com/serverless-stack/serverless-stack

I’m trying this and have tried a few other configurations. I’m pretty conviced CDK is great for anything but static websites. If it’s a single page app, go for it. But at this point, it’s not obvious what’s wrong and there’s no real clarity on how to fix it. Even

<http://thecdkbook.com|thecdkbook.com>

doesn’t have deployment of static pages correctly worked out for their site.

import * as sst from "@serverless-stack/resources";
import { RemovalPolicy } from "aws-cdk-lib";
import { Source, s3Deployment } from "aws-cdk-lib/aws-s3-deployment";

export default class MarketingStack extends sst.Stack {
  constructor(scope, id, props) {
    super(scope, id, props);

    const { api } = props;

    const staticSite = new sst.StaticSite(this, "Site", {
      path: "website",
      errorPage: "404.html",
      buildOutput: "public",
      buildCommand: "npm run build",
      environment: {
        GATSBY_API_URL: api.url,
      },
      s3Bucket: {
        publicReadAccess: true,
        removalPolicy: RemovalPolicy.DESTROY,
        websiteIndexDocument: "index.html",
      },
    });

    new s3Deployment.BucketDeployment(this, "deployStaticWebsite", {
      sources: [Source.asset("../website")],
      destinationBucket: staticSite.bucketArn,
    });

you can see it here. https://dev.comicshelper.com/reviews/the-good-asian vs https://dev.comicshelper.com/reviews/the-good-asian/index.html