Blog

Hugo Pipes Revolution

A Hugo built-in asset pipeline

{{ $style := resources.Get "main.scss" | toCSS | minify | fingerprint }} 
<link rel="stylesheet" href="{{ $style.Permalink }}" emotion="🤩">

Hugo’s roadmap got itself a new milestone when .43 delivered Hugo Pipes, a built-in set of asset processing methods.

From now on, Hugo will take care of bundling, minifying, fingerprinting our assets and even compiling our sass files! All of this without any external build tools.

In this post we’ll go through Hugo Pipes methods to cover how easy it is to implement a basic Hugo Pipes asset pipeline before turning to more advanced use cases, involving relinquishing some Sass and JS variables to our editors.

Better Relationships in Hugo

with Hugo's Related Content

I recently set my mind on improving the way I dealt with relationships in my projects by using Hugo’s very own Related Content1.

By doing so I slashed the build time by a whopping … 🥁 … 70%!

This article uncovers how easy it is to implement Hugo’s new Related Content feature on an existing project and how it may revolutionize the way we manage relationships in Hugo!

It’s time we get better at handling relationships 👫

Hugo, the scope, the context and the dot

Why is my variable not available here or there? 🙄

Moving from old regular template languages where the scope is rarely an issue, you may have a hard time wrapping your head around Go Template scoping constraints.

In this article we’ll try and understand the impact of the scope/context within our templates and partials and how to juggle with the dot 🤹.

Hugo Page Resources

and how to use them...

In this article we’ll cover Hugo 0.32’s Page Resources and its impact on the way we structure our content folders, what methods and properties it offers, how to use it in our templates and markdown and finally its newly metadata logic!

Pure CSS Masonry in 2018?

With those awesome css layout systems now available (Flexbox, Multi-column, Grid), one must wonder if they cannot help us build the masonry grid every client has been asking for the last couple of years. Let’s review what a masonry layout is and how those modern options could help us build it

Hugo Translator

a cheat sheet

Go Template is the templating language used by Hugo and other Go systems. Now it is not Twig or Blade or Liquid, don’t get fooled by the familiar curlies. It is a far stretch from those well known Templating Languages out there…

{{ printf "Hello %s %s. %s" $firstname (slicestr $middlename 0 1) $lastname }}

What is this 😨

{{ if or (eq firstname "George") (eq firstname "Daniel") }}

or that ? 😱

The first time you’re gonna stumble on the syntax above may be a bit deconcerting if you come from more conventional languages.

I spent a lot a time trying to figure out how best to use Go Template.

Using comparison with more familiar syntaxes, I wrote this modest cheat sheat article to try and help unveil the misteries of Go Template

Hugo .Scratch explained

Working variables in Hugo can be complicated when coming from classic languages.

What you usually do :

<?php
$greetings = "Good Morning";
if($sky == "dark"){
	$greetings = "Good Night";
}
// Or even better:
$greetings = $sky == "dark" ? "Good Night : Good Morning";

That next bit of code would be tempting :

{{ $greetings := "Good Morning" }}
{{ if eq $sky "dark" }}
	{{ $greetings = "Good Night" }}
{{ end }}
{{ $greetings }}

But that won’t happen 😞

To achieve this, you need .Scratch so let’s dive in!