Inlining CSS

support
1

Hi,

New here. I’m trying to setup my blog as a static site with Hugo (to replace for my old and busted blog backend), and so far it looks great.

As part of that, I’d love to be able to inline files into my generated HTMLs, especially CSS. Is there a current way to get that done?

Thanks,
Yoav

2

Obviously, besides copy-pasting the minified CSS into the templates themselves :slight_smile:

3

Unfortunately, I believe hugo does not support this. It does not do any css/html/js processing whatsoever (i.e. can’t minify html pages)

That’s why for my site, I just use a gulp task to take care of processing my assets and pages.
If you’re comfortable with preprocessors, you can give that a try, though it is going to be a bit of work since Hugo doesn’t have an end-to-end solution for it currently.

4

In theory you can use Data Files for this purpose. You’ll need to fashion a script to move the minified script from lib or dist directory for the installed package into the config file of your choosing. Alternatively, you could write the script to a partial and include it that way, e.g.

critical-vendor.css.html

<style media="screen">
  html{font-size:12px}*{box-sizing:border-box;text-rendering:geometricPrecision}
</style>

Then in your template do:

{{ partial "critical-vendor.css" }}

Avoid Gulp if you can and leverage the XP Code for Today philosophy to reduce code bloat, keep things maintainable and push innovation.