Hugo Pipes Explanation

support
1

I am new to static site generation(and website building in general) and I was struggling to find any absolute definition to what Hugo Pipes was made to do. I know that it is known as an “asset processing set of functions”, but i am unsure what that means. Could someone go into depth about what it is and when to place css/sass files in the assets folder vs the static folder? My guess is that it converts sass files to CSS (which the site says it does), but while I was studying themes, I noticed that the assets folder of the theme contains everything from html, to css. However its static folder contains only images…

Edit: Out of luck, I came upon a post explaining it - https://blog.carlmjohnson.net/post/2017/hugo-asset-pipeline/ (outdated, but it’s a good explanation) and the newer one: https://regisphilibert.com/blog/2018/07/hugo-pipes-and-asset-processing-pipeline/

Suggestion: the site should hyper-link this when it mentions that it is a static asset pipeline.

2

Hi,

The docs has a whole section on Hugo Pipes and what you can do with them: Hugo Pipes | Hugo

This page in the docs explains the different directories that might comprise a Hugo project and links to the relevant sections in the docs: Directory structure | Hugo

How theme authors organise their assets is really up to them. There are also themes that do not use /assets at all, and have css, js, and img files all in /static.

1 Like
4

Just to make sure I understand it correctly, Pipes is basically a set of functions to process files, and the assets folder is just a way of organizing what is going into Pipes? Also, I just realized what minification does and that might explain why everything went in there.

5

Yes, that is correct.

Files in the static folder in the other hand are copied as they are.

To minify html you only need to add the minify option to Hugo when you build your site.

1 Like