Deploying to AWS Amplify with postCSS/Tailwind

[pished]

I have spent the better part of a week trying to figure out what I am missing. When I test locally with hugo server -D it works like a charm. Even when I just build it locally with the simple hugo command I get the public folder with minified css. I think there is some disconnect when I am actually trying to deploy it on AWS Amplify, but I am not sure where - it is kind of hard to debug at that point because as far as I know I can’t exec into the container that is created.

Here are the build settings in my amplify console:

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install -g postcss-cli autoprefixer
        - npm ci
    build:
      commands:
        - npm run start
  artifacts:
    baseDirectory: public
    files:
      - '**/*'

Here is my repo: https://github.com/pished/nitrocodebrew/

It builds successfully - but it cant find the minified css. It is probably some simple naming that I am missing. Could anyone have a quick lookover for me and see if anything stands out as missing?

Summary:

1. what you were doing or what you tried?
   Tried to deploy to AWS Amplify with multiple different build/code settings.

2. what you expected?
   It to look like the same as it does locally - except on the web.

3. what actually happened?
   A barebones HTML page with no styling.

[pointyfar]

Hi there,

Can you try adding www to your baseURL in your config.toml?

When I load your website, I see this warning on the console:

Mixed Content: The page at 'https://www.logsontap.dev/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.....css'. This request has been blocked; the content must be served over HTTPS.

Inspecting the source however, and it is trying to load https://....css.

May be worth a shot?

The actual css files are actually available if you load them at the URLs, so Hugo is generating them, and they are being uploaded.

[pished]

Ah, you would indeed have found the issue. Right there in the FAQ at the top as well! I still have no idea how SSL certs work.

Thank you!