Error deploying on Render: "Check your Post CSS installation"

support
1

As the title suggests, I am having troubles deploying my Hugo website on render com Locally I don’t have any error, I can see everything as usual. Also a month ago I could deploy on render without issues.

My last attempts of deploying I always get the following error:

Error: Error building site: POSTCSS: failed to transform “css/styles.css” (text/css). Check your PostCSS installation; install with “npm install postcss-cli”. See PostCSS | Hugo this feature is not available in your current Hugo version, see Frequently Asked Questions | Hugo for more information

render_errors_hugo
render_errors_hugo1024×317 7.1 KB

So far I have updated my postcss and postcss-cli packages both globally and locally and build again. I followed the link provided by the error and created a postcss.config.js file in the main directory of my hugo website containing the following:

{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.PostCSS }}

Although my main config file is config.toml. Regardless of any attempt, render keeps sending me the same error. Any ideas what could help?

Maybe I’m missing something in my postcss.config.js file or I need a link to my config.toml file? I also saw somewhere that for github actions one can add the code below, but I’m not sure how it would work for render. Also, where exactly should I place it? In my config.toml with toml syntax? If so, under which section?

name: Install dependencies
        run: |
          npm install postcss -D
          npm install -g postcss-cli
          npm install -g autoprefixer

Any support I’ll be extremely thankful.

I have seen many similar posts but so far nothing I have tried solves my problem. What is surprising for me is that a month ago I had no issue and locally everything looks well too.

2

It seems like you are confusing a number of things.

No. See the postcss documentation for examples of what this file should look like.

No. Your site is built on render.com not on Github.

Please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Hi, thanks for the heads up, I am adding some pieces of code and what I have tried so far but it is hard to know where to look at, I’m far from specialist in web development.

Here is the link to my github repository if you’d like to look at the code in more detail.

And I understand that my site is built on Render not on Github, that’s actually why is hard to find some solution. Most of the similar issues I have found are dealing with deploying on Github while on Render I didn’t have to define anything in my config file to build.

4

I suggest you raise an issue here:
https://community.render.com/

I’ll have a look at your repo later today.

1 Like
5

It looks like you didn’t follow the theme’s installation instructions, specifically:
https://github.com/opera7133/Blonde#install-dependencies

6

Hey, thanks a lot for finding out! Apparently the have updated the theme since I first started using it over a year ago. Now they are including several files with more use of npm so, I have just updated my theme based on their new instructions. Now I get different errors related to one of the templates so, I have asked directly in the theme github issues.

Thanks a lot anyway, without your help I wouldn’t have figure out that it was all about the updates of the theme.