How to prevent PostCSS from running during deployment to Netlify?

support
1

I wonder if there is a way to run .PostCSS on my local machine but have Hugo use the committed resource available when on Netlify.

Currently I run my styles through resources.PostCSS. The problem is that this adds up a good 3s build time on Netlify (1s a modern machine) even when a resource is available.

Is there a way for Hugo to only run the PostCSS process on my local machine and fallback to its committed resource on Netlify?

2

I would think that one could achieve this by committing the generated resources directory.

For example in the Hugo Themes repo we mention that themes using the Hugo Pipes methods toCSS and / or PostCSS need to commit the generated resources for the theme to work with the basic version of Hugo.

3

Thanks Alexandro,

and this is what I do. But based on this assumption (which I shared with you), even running hugo mutliple time on my local machine should have the same effect:

first time: 3s
subsequent times < 1s

Yet, it always takes 3s.

I think I’m missing something.

4

How are you determining the time it takes PostCSS to run?

5

I remove the .PostCSS transformation from my template and build time drops to 117ms.

6

Right. Now I got the nature of your question.

The behavior you encountered is due to the Netlify Build Image that you use.

The default Ubuntu Xenial 16.04 Build has Hugo Extended installed and as such the committed resources are not used and .PostCSS is executed again during deployment.

To prevent this from happening in your project’s Netlify settings you need to downgrade to the Ubuntu Trusty 14.04 build image, because that is the one that offers the Basic version of Hugo.

The above is not mentioned in the Netlify documentation.
It took me some head scratching before I figured it out sometime ago.

P.S. I reworded the question in the topic title to reflect the above.

1 Like
7

Is there any mention of this behavior of Hugo Extended in the docs or changelogs?

8

Not that I am aware of.

Feel free to send a Pull Request to the Docs.

9

If you don’t want to downgrade your netlify image, you can download a non extended linux hugo binary as part of your netlify build command, then use it instead.

10

@zwbetz

How were you able to install and run custom software on Netlify?

The Netlify Build Image is a Docker container that comes with specific software. The end user has no sudo access and from what I’ve seen, it is impossible to adjust the PATH through the .bashrc shell script, since the Bash call within the Docker container is non interactive.

As far as I know it is impossible to install custom binaries and then run them within the Netlify Build Image, but I would love to be proved wrong.

11

For example, make your netlify build command something like:

export MY_VERSION=0.64.1 \
&& export MY_TARBALL=hugo_${MY_VERSION}_Linux-64bit.tar.gz \
&& curl -L -O https://github.com/gohugoio/hugo/releases/download/${MY_VERSION}/${MY_TARBALL} \
&& tar xf ${MY_TARBALL} \
&& chmod 777 ./hugo \
&& ./hugo version \
&& ./hugo

Notice how each reference to hugo is via the current dir like ./hugo

1 Like
12

You can somehow make sure that PostCSS is not available on the target machine.

Note to others: You don’t need the extended Hugo version to run PostCSS.

But that said, 3 seconds for a CI build sounds fine to me …

13

It is. But now that those build minutes are money, we’re leaving no “seconds” unturned.

1 Like
14

A related tip would be to use modules for your “style theme components” and then vendor them into your main project (hugo mod vendor). You can then run with hugo --ignoreVendor locally if you want to do some edits.

But do note that hugo mod vendor does not touch whatever you have living in /themes.

Oh, an you will love the next Hugo version (probably this week…). I remove lots of pain and is slightly faster, esp. if you use taxonomies, and probably also for server reloads (harder to measure).

1 Like