Written by Edd Turtle on makewithhugo.com
on
(Updated: )

Minify and Load CSS Through Hugo

This post is about loading your CSS files with Hugo in an easy and efficient way, now that Hugo has asset and minification built-in. The advantages of using the functions that come with Hugo are that you don’t have to do any of the building yourself (or use a third party), it just does it!

There are a few steps involved in the code that we will walk through:

  1. Specify your main scss filename (the one where everything imports into).
  2. Specify your outputted filename.
  3. Define your options, if you are on a local server then we turn on source maps (for easier debugging), otherwise we minify the CSS for performance on our live environment.
  4. Build your CSS file using resources.Get.
  5. Load the CSS file into the HTML source.
1
2
3
4
5

{{- $cssSource := "scss/mymainscssfile.scss" }}
{{- $cssTarget := "css/style.css" }}
{{- $cssOptions := cond (.Site.IsServer) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }}
{{- $style := resources.Get $cssSource | toCSS $cssOptions }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

Note: the hyphen in {{- means remove all whitespace before this.

This will output something like:

1

<link rel="stylesheet" href="/css/style.css">

Verify Authenticity (optional)

If you think there’s a possibility of your CSS being tempered with and you want to be extra careful then you can check it’s integrity by using the “fingerprint” option. To do this, change the last 2 lines to look like this:

1
2

{{- $style := resources.Get $cssSource | toCSS $cssOptions | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

This will output something like:

1

<link rel="stylesheet" href="/css/style.9eb7a4aa85871fc4fcf7531fe7a57fad0b4a7e698cd5861eddfb5ba4584ab7e5.css" integrity="sha256-nrekqoWHH8T891Mf56V/rQtKfmmM1YYe3ftbpFhKt&#43;U=">

Do you have an extra options you add? Or do you prefer to load your CSS in differently? Let us know in the comments below.

#minify #css #fingerprint #integrity #resource #assets #performance #loading
Author Edd Turtle

Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Tweet me! ☕   Buy me a Coffee

Related Posts

  • Changing the Syntax Highlighting Style in Hugo –
    When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box. In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.
  • Thumbnail Images on your Hugo Blog Posts –
    Hugo now has the ability to do image resizing, cropping, quality-changing, etc (hooray!) - so how do we use it? In this post we take a look at how to resize images automatically using Hugo. There’s a few different ways to achieve this, depending on what you’re trying to do. In a Theme - “I want to make thumbnails!” You might run a blog, which on the home page has a list of your blog posts.
  • 99+ Google Pagespeed Score with Disqus –
    If you’re into your front-end web performance you will probably have heard of Google Pagespeed and/or Lighthouse as tools to test and measure how quickly and efficiently you web pages load. This is also something we use here on this site to make your reading as pleasant as possible. But, we also use the online commenting system called Disqus and the two don’t always play nicely together - in that Disqus loads lots of files and takes a while to load.