Home
Support Forums

HTML rendering issue

The HTML that renders on my local hugo build (on my PC) and the one that gets deployed to Github seems to change once I deploy on Netlify. The alignment is changed and even my embedded Youtube vide link looses the https: in the link. I find that weird but for the life of me cannot find the reason for it.

Site: martin-blog.netlify.app

Example of the original Hugo rendered HTML on Github:

Could you try using a newer Hugo version? I just deployed your repo with Hugo 0.84.1 and it works fine I suppose: Pablo - Martin's Blog.

Hi Hrishikesh

Thank you for your reply. I completely understand. I had an old version on my laptop and a newer on my PC however tried using the latest Hugo v0.84.2 and still not working. Have a slightly older version on my Arch linux but that is because the repo isn’t getting updated correctly. Anyway, still think I’m doing something wrong but cannot think of what it is. Probabably something completely silly.
Have added a tag to show version of generator and its showing the new Hugo version??
When I upload using the new version its still showing as Hugo 0.54.0
Please help

By default Netlify uses 0.54.0 to support legacy websites. You need to override it by adding an environment variable with the name HUGO_VERSION and value 0.84.2. Build environment variables | Netlify Docs

2 Likes

That is rather weird from Netlify to support usch an old version dating from 1 Feb 2019.

Not eaxctly user friendly and if you didn’t tell me whouldn’t know that this needs specifically setting. Cannot Netlify pick up the version is was generated locally and then use that version at least?
Anyway, Hrishikesh, thank you so much for this. It works now.

On a separate matter what setting is causing my html lines to loose the indentation.

The newest build image has updated the in-built version if I remember correctly, but as a matter of fact, it’s always recommended to use the same versions to build locally and on Netlify. It’s not just for Hugo, but any SSG. The node version, module versions, etc., all need to stay in sync. This way, you can eliminate the obvious causes.

How would Netlify know? You’re not specifying the version anywhere, it’s not possible for Netlify to guess what version your system is using.

Do you have a specific line or something that I can test? There’s no reason why indentation should be different, but I can give it a check.

On a side note, it’s recommended to minify your files (remove the indentation and all unnecessary spaces) to make your website faster. So, you probably should try to preserve indentation in the first place.

Hi

I don’t know how it would know? I am not a Netflify or Hugo developer. I am a bit surprised it cannot. I have for example added a meta tag to show the Hugo version so perhaps if you asked the site developer to add that then Hugo-specific Variables | Hugo
Adding {{hugo.Generator}} inside the html header will result in something like

<meta name="generator" content="Hugo 0.84.2" />

The output you created here seems to have preserved the html formatting. Do you know what setting you use to keep the html formatting unchanged?

To be able to access Hugo variables, Hugo would need to be installed. And Netlify needs to know the version before starting to build the website. I think you can now see where the problem lies. Also, Hugo version would just print the version of Hugo installed on the system running it. It won’t actually tell you the version someone else used to build the website. Hugo docs mention that you might need to configure: Host on Netlify | Hugo. Plus, not all SSGs have the feature to print their versions and not everything needs to print versions, for example Node version is a variable that would never be printed.

Netlify needs to be able to build lots of websites and they’re expected to work with 0-config. Many people don’t use the latest versions of the dependencies because their app was written with legacy versions and the latest versions have breaking changes. The developers might not have the time or ability to migrate to the latest versions. So, it’s generally considered that older versions will be able to build newer websites. But, newer ones won’t be able to build older websites due to the breaking changes. And yeah, there are exceptions to almost everything, just like it was in your case.

Specifically in case of Hugo, many developers are still able to build their website with Hugo 0.54.0. So, they might not need to specify the updated version, but there might have been some changes in the later versions that fixed your problem.

By adding the environment variable like you did.

I’m not sure what’s the change according to you. I just ran Diffchecker - Online diff tool to compare text to find the difference between two text files to check for differences in text and no difference points out a difference in indentation. I used the website deployed by me and you, checked their source HTML and ran the tool. I used Pablo - Martin's Blog for testing.

When I generate the html it looks like this:

<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.84.2" />
<meta name="build" content="2021-06-28T10:59:21Z">
<title>Martin&#39;s Blog</title>
<script>(function(d,e){d[e]=d[e].replace("no-js","js");})(document.documentElement,"className");</script>
<meta name="description" content="Martin&#39;s Blog">
<meta property="og:title" content="Martin&#39;s Blog" />
<meta property="og:description" content="Martin&#39;s Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blog.mcdowell.si/" />

yours looked like this:

<html class="no-js" lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Pablo - Martin&#39;s Blog</title>
	<script>(function(d,e){d[e]=d[e].replace("no-js","js");})(document.documentElement,"className");</script>
	<meta name="description" content="">
		<meta property="og:title" content="Pablo" />
<meta property="og:description" content="Had a call about a possible adder attack on a family cat and the owner brought down the cat and also the adder. He was brought in a small detergent box. After carefully opening the box and tipping the snake into a large plastic container we realised we were dealing with a grass snake, most likley male. These snakes are non-venomous and do not constrict so they are absolutely harmless to people." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://blog.mcdowell.si/post/2021/2021-05-21-pablo/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2021-05-21T15:19:36&#43;01:00" />
<meta property="article:modified_time" content="2021-05-21T15:19:36&#43;01:00" />

Indentations preserved on yours.

I’m not sure where you’re seeing this, on the live website, the indentation exists: