skip to content
Jakub Szafran

Minor deployment issues with Hugo on Netlify

/ 3 min read

hugo, netlify

In this post I’d like to go through 2 minor problems I faced when deploying this blog (built with Hugo) on Netlify:

  • CSS not loading
  • Dates not rendering (i.e. text :date_medium instead of May 2, 2023)

Hugo and Netlify overview

In case you’re not familiar with Hugo or Netlify, here’s a short overview generated by ChatGPT3:

Hugo is a popular open-source static site generator that allows you to create fast and secure websites without relying on a database or server-side scripting. It uses markdown files to create content and templates to define the structure and layout of your site.

Netlify is a cloud-based platform that provides a variety of tools and services for building, deploying, and managing modern web projects. It offers features like continuous deployment, automated builds, and scalable hosting, making it easy to create and maintain high-performance websites.

One of the most awesome things about using Hugo and Netlify to create a static site blog is that hosting your website on Netlify is completely free. This means that you can create and deploy a fast, secure, and scalable website without incurring any hosting costs.

I’ll just add that a Netlify’s start plan (which is free) is very generous and, for sites like this one (hobbyist blog), it’s way more than you’ll probably need.

CSS not loading

The first problem I encountered was that, after a successful deployment to Netlify, CSS was not loading (but everything was working fine locally). After inspecting the network traffic in developer tools, it turned out that link was not constructed properly.

This got me into thinking that I’ve messed something up with the baseURL variable in the config file. Indeed, I set it already to https://jszafran.dev/, but the domain was not yet ready and hooked up to Netlify app. Updating the config with baseURL = '/' fixed the problem.

Dates not rendering at all

The second problem was with dates. When running the blog on localhost, all dates were rendered properly and everything was working fine. However, when deploying to Netlify, every date on the blog was rendered as time layout string :date_medium.

Google/StackOverflow was indicating towards something wrong with date format variable in config, but suggested changes did not help.

Eventually I found the root cause - it was a mismatch of Hugo versions (Hugo in Netlify build vs Hugo on my local computer).

When deploying the application, I imported it from a github repository. Netlify is smart enough to detect the framework and its build commands. However, upon inspection of deployment logs, I found below lines:

3:00:59 PM: "hugo" at version "unknown"
...
3:01:00 PM: hugo v0.85.0-724D5DB5+extended linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio

For local development, I had a version v0.101.0. To fix that, I had to add a netlify.toml file in the repository root with below contents:

[build]
  command = "hugo"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.101.0"

so that next Netlify’s deployment would build my site with v0.101.0 version of Hugo.

Closing remarks

Hope you’ll save some time if fighting with similar problems.

Best Regards,

Kuba