Deploying to AWS Amplify with postCSS/Tailwind

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.

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.

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!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.