Are asset pipelines working on Netlify for anyone?

support
10

For clarity to help others, here is the full process.

  1. Install the extended version of Hugo locally.
  2. Make sure you have resources and assets folders, create them if needed.
  3. Make sure both folders are added to your git commit.
  4. Move resources you wish process into the assets folder. I created sub-folders in the same structure as the static folder that previously contained my css & js assets.
  5. Adjust your templates to use the resources function. See below for some examples.
  6. Run either hugo or hugo server to populate the resources folder.
  7. Update your netlify.toml settings file so that Netlify uses Hugo v0.45+
  8. Commit and sync your git repo - Netlify should now build your site just fine.
  9. Test and enjoy!

Examples from my layouts/_default/baseof.html.

For CSS, note the use of BulmaCSS and my own overrides. This is in the <head> section:

    {{/* Bundle and minimise CSS resources */}}
    {{- $bulmacss := resources.Get "css/bulma.css" -}}
    {{- $css2016 := resources.Get "css/2016.css" -}}
    {{- $syntax := resources.Get "css/syntax.css" | minify | fingerprint -}}
    {{- $styles := (slice $bulmacss $css2016) | resources.Concat "css/bundle.css" | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ $syntax.Permalink }}" integrity="{{ $syntax.Data.Integrity }}" crossorigin="anonymous">

Note that I am using the Monokai formatting for the highlight shortcode and it fails to bundle correctly for me so I have to keep it separate.

And for JavaScript, towards the bottom of the <body>:

    {{ $js := resources.Get "js/2016.js" | resources.Minify | resources.Fingerprint }}
    <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>

Worth noting that this is actually defined in my theme rather than the site itself. If using assets in a theme, you can choose whether to run Hugo against your theme (run it against the theme folder) in order to create the resources in the theme or you can get each site to create and commit the resources and that’s what I’m doing as it seems simpler to me. Both work just fine with the assets in the theme’s assets folder.

The theme is here in case you are interested:

7 Likes