30+ seconds for Hugo to build when making changes to css file

support
1

Screen Shot 2023-04-28 at 15.22.25
Screen Shot 2023-04-28 at 15.22.25708×132 29.2 KB

I’m using plain css and the Hugo build process is insane. Fast builds for literally anything else (templates, etc.)

My project is dockerized but I don’t see how that might be the source of the issue.

Inside my home page template (index.html) I have this block of code

{{ define "stylesheets" }}
{{ $css_home := resources.Get "css/home.css" | minify | fingerprint  }}
<link rel="stylesheet" type="text/css" href="{{ $css_home.Permalink }}" integrity="{{ $css_home.Data.Integrity }}">
{{ end}}

I have a corresponding block declaration in my baseof.html

<head>
    ...
    {{/*  Add stylesheets from within a layout  */}}
    {{ block "stylesheets" . }}
    {{ end }}
    ...
</head>

I’m also using tailwind in addition to the plain css. Plain css is for when I need to break out of tailwind

Things I’ve tried

  1. Remove the offending block of code from index.html and include the css file somewhere else (e.g., baseof.html)
  2. Restarting hugo (via Docker Compose)
  3. Deleting the volume for my container
  4. minifying and finger printing

Any ideas ??

2

Not recommended to use Docker container to run Hugo server.
As we know the Hugo is faster framework to build static website files. You can try run Hugo command build your site in your local laptop, that will feel the fastest feeling. Then you can upload the site static files to Docker container server run as Nginx or other website server which make your site display on internet.

3

Hmm the Hugo docs have Docker in their installation instructions. And the image’s README shows how to run Hugo server

4

I’ve noticed also that it’s not just plain css files, when I make changes to my tailwind config the build times are also very slow

5

What version of Tailwind are you using? If not 3, with JIT mode enable, your CSS file is likely huuuuuge.

This is fine normally, if you use Tailwind as intended; i.e. not writing css.

But, if you make changes to your Tailwind config, or add custom styles, then the entire thing has to be rebuilt, which takes a while.

First thing to check is the size of your built css file.

1 Like
6

Says who?

2 Likes
7

I am not using Tailwind version 3 unfortunately, as I think the JIT compiler is not natively supported by Hugo.

First thing to check is the size of your built css file.

Thanks for the tip ! However the css files downloaded by my browser are quite small, 112 B

Screen Shot 2023-05-18 at 10.13.25
Screen Shot 2023-05-18 at 10.13.25984×192 48.5 KB

So what works for me is to forgo the use of the Hugo’s postcss pipe. I am using the npm command from this article,
"build-tw": "yarn tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css"

And including the file produced by that command

  {{ $tailwind := resources.Get "css/style.css" }}
  <link rel="stylesheet" type="text/css" href="{{$tailwind.Permalink}}">

My simple development flow is,

  1. Make css/tailwind changes
  2. Hot reload

Note that I don’t need a watch command.

  • Tailwind utility rebuild (e.g., bg-red-500): ~1xx milliseconds
  • CSS file rebuild (e.g., .class { ... }): ~1 second
  • Tailwind config file rebuild: ~1 second