Hugo is amazing. I'm convinced. Transformed

Bear with me for a moment:

I recently rambled about how I would move our site to wordpress due to sheer frustration. I was just about to do the moving after coming across with yet another small issue with Hugo. But it wasn’t HUGO’s fault, it was my own, really. Impatience, mostly.

Now I’m convinced I will be moving ALL my current sites TO HUGO and recommending HUGO to my friends working over at the BBC. I will personally make the recommendation to drop what they are using and move full steam with HUGO.

See, two months ago I developed another site with Hugo. Our corporate site, which is rather large. To handle the SCSS bit, I used Prepros (amazing free tool).

At the time, @Bep and the rest of the guys were developing HUGO behind the scenes and, one morning, out of nowhere, they gave us SCSS support. By then I was already starting to develop The Free Bundle with HUGO and was about to make the Prepros setup for it. Instead, I went ahead and give the newly launched version of Hugo pipelines a try. It took me nearly one minute to jump from Prepros to Hugo’s .scss.

But that was with a new site.

What would I do now that I had to re-visit my old corporate site done entirely with Prepros?

I feared it was going to be a mess to jump from the a post-process scss software to HUGO’s integrated SCSS pipeline.

But all it took is this:

  1. Renamed my “src” folder for “assets”

  2. Added two lines of code:

    {{ $options := (dict “targetPath” “css/style.css” “outputStyle” “compressed” “enableSourceMap” true “includePaths” (slice “node_modules/myscss”)) }}

    {{ $style := resources.Get “styles/style.scss” | resources.ToCSS $options }}

TWO STEPS. That’s it. That’s all it took me to go from a Post Process SCSS software to HUGO SCSS pipeline.

Now I can do: <link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}"> to call my css.

I am AMAZED. Amazed I tell you. I haven’t tried anything this straightforward since the 90’s.

I am absolutely convinced that I made the right choice by sticking with HUGO for TheFreeBundle and our corporate site as well.

Look here, I actually cleared my day’s schedule to update this site into the current version of HUGO! I thought I was going to be 4, 5 hours trying to fix the mess of porting the .SCSS from Prepros to HUGO. Broken files everywhere, references pointing God knows where.

Boom. Two seconds later: done. I am now left with a full jar of Colombian coffee, some donuts, and time. Time to focus on what’s important. That’s the big difference with HUGO. It had a bit of a learning curve, sure. But every minute I spend learning the basics, it has now paid back BIG time.

Thank you guys. Pizza’s on the way, and I can’t be more happy than this about HUGO.

My tip for the thread: stick with HUGO. It will make you smile.


The “FreeBundle” site is absolutely awesome, and at first I didn’t quite believe it was generated by Hugo, so after checking out the source, I’m even doubly amazed! This site should be front and center on Hugo’s “what you can do with Hugo” page (if there is such an animal). I was leaning towards Hugo for a number of my clients sites, but this has convinced me outright! Now to start coding.

1 Like

Not really my area of interest but I have to say that’s a very nicely done site. Even better that it’s built with Hugo. Well done!

Thank you!

And I want to stress this out: I am not a coder. I code, but I am not a coder, really. If I can do it, trust me: anyone can. I believe NY Times and others belong in Hugo. There’s simply a lot you can do with it.

Thanks mate!

Truth is, if I had used server side, it would be a mess. Hugo brings us back to HTML / CSS --we never should have left that house.

Great article Javier. I’m new to Hugo so please tell me where step 2 lines of code go please?

I’m going to check out your site too!

They go whereever your <head></head> for the site is. You would need those two lines plus the link line cited below that.

Much thanks @RickCogley. Didn’t realise there are still two versions of Hugo. Off to get the one with SASS/SCSS now.

1 Like