Assets and Pipes
What are the Assets and Pipes?

An asset is any data, software or image that supports the web application front end. Among other files, assets include css files, images and JavaScript.

Pipes are the functions that transfer the assets into form that is understood by the front and make the assets more efficient to transmit to the client by minification and bundling.

Minification and Bundling decreases website loading time. Minification of an asset takes a readable software and removes all of the comments, spaces, cariage returns and makes long varibles shorter to minimize the asset size. Bundling of assets includes combining serveral files and combining them into a single files to reduce number of requests by the browser to complete loading a page.

Hugo Pipes Documentation

There are two steps to configure the assets in Hugo.

1 Place the assets in the assets folder.

For example, move the static/css folder to assets/css, now the folder will look something like this:

Diagram

2 Provide instractions of how to use the files in the template.

12
13
14
15
16
17
18
  {{ "<!-- Main Stylesheet -->" | safeHTML }}
  {{ $asciidoc_css := resources.Get "css/asciidoctor.css" }} (1)
  {{ $theme_css := resources.Get "css/style-white.css" }}    (1)
  {{ $syntax_css := resources.Get "css/syntax.css" }}        (1)
  {{ $custom_css := resources.Get "css/style-white.css" }}   (1)
  {{ $style := slice $asciidoc_css $theme_css $syntax_css $custom_css | resources.Concat "css/style.css" }} (2)
  <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen"> (3)
1Get the resources into varibles
2Use pipes (|) to bundle the assets
3Add link to the assets
The minification can be accomplished by --minify argument when building the site for production, this makes it easier to debug during development.