Hugo deploy, some HTML tags not closed, doesn't match local server

Support
, ,
1

I’ve deployed several Hugo sites using Netlify and I’m running into something I’ve never seen before. The site looks fine both when I build locally to test and when I run a local server to test. But when I deploy, some HTML tags are not closed, and the page formatting, as a result, is not right.

What I’ve done:

  • Clear cache and re-run deploy, no change
  • Downgraded node to v10.19.0 and tested locally
  • I’ve verified that all the requisite CSS and SCSS files are getting loaded
  • I’ve tested the site locally with hugo server, a hugo build hugo, and netlify dev, all the same results, works fine.
  • Start with fresh clone of working branch from git, npm install and hugo server -w, works fine.
  • Deployed from a second github and netlify account, same issue

What’s different between local and deploy

In several places, tags aren’t closed like they should be.

This is the code snippet being rendered in the screenshots below. div.icon-box closes after img.h3icon.

<div class="model-item">
    <div class="model-wrap">
        <div class="icon-box">
            <img class="h3icon" src="/images/uploads/head_180.png">
         </div>
         <div class="h3text">
             <h4 class="uppercase">{{ .headName }}</h4>
             <p class="reg ">{{ .headText }}</p>
         </div>
    </div>
</div>

When deployed, that closing <div> tag does not appear.

Screen Shot 2020-02-06 at 9.01.25 PM
Screen Shot 2020-02-06 at 9.01.25 PM2942×678 373 KB

I can’t post a second screenshot comparing the layouts but here’s one of the preview deploys. The icon-box markup appears on this page: https://5e3da1fc600d32000830139a--eloquent-gates-b65172.netlify.com/
Branch deploy: https://switch-to-hugo--eloquent-gates-b65172.netlify.com/
Deploy from a different github and netlify account: https://5e3dcbc9a2994901b33e5b0d--sleepy-snyder-96eecf.netlify.com/

Local hugo version:

Lous-MacBook-Pro:repos lougro$ hugo version
Hugo Static Site Generator v0.61.0/extended darwin/amd64 BuildDate: unknown

This is the netlify.toml:

[build]
publish = "public"
command = "hugo --gc --minify"
functions = "./functions"

[context.production.environment]
HUGO_VERSION = "0.61.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo  --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.61.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo  --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
functions = "./functions"

[context.deploy-preview.environment]
HUGO_VERSION = "0.61.0"

[context.branch-deploy]
command = "hugo  --gc --minify -b $DEPLOY_PRIME_URL"
functions = "./functions"

[context.branch-deploy.environment]
HUGO_VERSION = "0.61.0"

Deploy log also looks normal to me:

11:44:28 AM: Build ready to start
11:44:37 AM: build-image version: 8e315e54bc4032a32e73290be556cde4f8348c12
11:44:37 AM: build-image tag: v2.8.2
11:44:37 AM: buildbot version: 45cd00068410d70db72c9672cdd014995488e12a
11:44:37 AM: Fetching cached dependencies
11:44:37 AM: Starting to download cache of 429.9MB
11:44:40 AM: Finished downloading cache in 2.983148927s
11:44:40 AM: Starting to extract cache
11:44:49 AM: Finished extracting cache in 8.214596158s
11:44:49 AM: Finished fetching cache in 11.44650772s
11:44:49 AM: Starting to prepare the repo for build
11:44:49 AM: Preparing Git Reference refs/heads/switch-to-hugo
11:44:53 AM: Found netlify.toml. Overriding site configuration
11:44:53 AM: Different publish path detected, going to use the one specified in the toml file: 'public' versus 'dist' in the site
11:44:53 AM: Different build command detected, going to use the one specified in the toml file: 'hugo  --gc --minify -b $DEPLOY_PRIME_URL' versus 'npm run build' in the site
11:44:53 AM: Different functions path detected, going to use the one specified in the toml file: './functions' versus '' in the site
11:44:53 AM: Creating functions prep folder
11:44:53 AM: Starting build script
11:44:53 AM: Installing dependencies
11:44:53 AM: Started restoring cached node version
11:44:55 AM: Finished restoring cached node version
11:44:56 AM: v8.17.0 is already installed.
11:44:56 AM: Now using node v8.17.0 (npm v6.13.4)
11:44:56 AM: Attempting ruby version 2.3.6, read from environment
11:44:58 AM: Using ruby version 2.3.6
11:44:58 AM: Using PHP version 5.6
11:44:58 AM: Started restoring cached node modules
11:44:58 AM: Finished restoring cached node modules
11:44:58 AM: Installing Hugo 0.61.0
11:44:58 AM: Hugo Static Site Generator v0.61.0-9B445B9D linux/amd64 BuildDate: 2019-12-11T08:27:34Z
11:44:58 AM: Started restoring cached go cache
11:45:00 AM: Finished restoring cached go cache
11:45:00 AM: Installing Go version 1.10
11:45:00 AM: unset GOOS;
11:45:00 AM: unset GOARCH;
11:45:00 AM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64';
11:45:00 AM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64/bin:${PATH}";
11:45:00 AM: go version >&2;
11:45:00 AM: export GIMME_ENV='/opt/buildhome/.gimme_cache/env/go1.10.linux.amd64.env';
11:45:00 AM: go version go1.10 linux/amd64
11:45:00 AM: Installing missing commands
11:45:00 AM: Verify run directory
11:45:00 AM: Executing user command: hugo  --gc --minify -b $DEPLOY_PRIME_URL
11:45:00 AM: Building sites …
11:45:00 AM: WARN 2020/02/07 17:45:00 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
11:45:00 AM:                    | EN
11:45:00 AM: +------------------+-----+
11:45:00 AM:   Pages            |  21
11:45:00 AM:   Paginator pages  |   0
11:45:00 AM:   Non-page files   |  90
11:45:00 AM:   Static files     | 152
11:45:00 AM:   Processed images | 122
11:45:00 AM:   Aliases          |  12
11:45:00 AM:   Sitemaps         |   1
11:45:00 AM:   Cleaned          | 129
11:45:00 AM: Total in 352 ms
11:45:00 AM: Function Dir: /opt/build/repo/functions
11:45:00 AM: TempDir: /tmp/zisi-017892036
11:45:01 AM: Prepping functions with zip-it-and-ship-it 0.3.1
11:45:03 AM: [ { path: '/tmp/zisi-017892036/gettweets.zip', runtime: 'js' } ]
11:45:03 AM: Prepping functions complete
11:45:03 AM: Caching artifacts
11:45:03 AM: Started saving node modules
11:45:03 AM: Finished saving node modules
11:45:03 AM: Started saving pip cache
11:45:03 AM: Finished saving pip cache
11:45:03 AM: Started saving emacs cask dependencies
11:45:03 AM: Finished saving emacs cask dependencies
11:45:03 AM: Started saving maven dependencies
11:45:03 AM: Finished saving maven dependencies
11:45:03 AM: Started saving boot dependencies
11:45:03 AM: Finished saving boot dependencies
11:45:03 AM: Started saving go dependencies
11:45:07 AM: Finished saving go dependencies
11:45:07 AM: Build script success
11:45:07 AM: Starting to deploy site from 'public'
11:45:08 AM: Creating deploy tree 
11:45:08 AM: 144 new files to upload
11:45:08 AM: 0 new functions to upload
11:45:12 AM: Starting post processing
11:45:14 AM: Post processing done
11:45:14 AM: Site is live
11:46:04 AM: Finished processing build request in 1m27.37858763s

The diff on the local hugo build vs the downloaded deploy directory is more than 12000 lines long. There must be some extra compression that will make a diff not useful. But a search for icon-box shows that the tag isn’t being closed at the right time, just as showing in devtools.

2

Logs from running docker netlify build locally, following instructions detailed here GitHub - netlify/build-image: This is the build image used for running automated builds, as recommended here https://answers.netlify.com/t/common-issue-debugging-site-builds/142:

buildbot@237f16dabf79:/$ export NODE_VERSION=12 NODE_ENV=production HUGO_VERSION=0.61.0 HUGO_ENV=production; build hugo -v
Installing dependencies
v12.15.0 is already installed.
Now using node v12.15.0 (npm v6.13.4)
Attempting ruby version 2.6.2, read from environment
Using ruby version 2.6.2
Using PHP version 5.6
Started restoring cached node modules
Finished restoring cached node modules
Installing Hugo 0.61.0
Hugo Static Site Generator v0.61.0-9B445B9D linux/amd64 BuildDate: 2019-12-11T08:27:34Z
Started restoring cached go cache
Finished restoring cached go cache
Installing Go version 1.12

unset GOOS;
unset GOARCH;
export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';
export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";
go version >&2;

export GIMME_ENV="/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env"
go version go1.12 linux/amd64
/usr/local/bin/run-build-functions.sh: line 585: /opt/buildhome/.wasmer/wasmer.sh: No such file or directory
Installing missing commands
Verify run directory
Executing user command: hugo -v
INFO 2020/02/08 18:10:05 No translation bundle found for default language "en"
INFO 2020/02/08 18:10:05 Translation func for language en not found, use default.
INFO 2020/02/08 18:10:05 i18n not initialized; if you need string translations, check that you have a bundle in /i18n that matches the site language or the default language.
INFO 2020/02/08 18:10:05 Using config file:
Building sites … INFO 2020/02/08 18:10:05 syncing static files to /opt/buildhome/repo/public/
WARN 2020/02/08 18:10:05 found no layout file for "HTML" for "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN
+------------------+-----+
  Pages            |  21
  Paginator pages  |   0
  Non-page files   |  90
  Static files     | 152
  Processed images | 124
  Aliases          |  12
  Sitemaps         |   1
  Cleaned          |   0

Total in 269 ms

The result in the built files in docker is that the .icon-box div tags are properly closed:

<div id="h3text-panel-phone" class="margb80 padw80">
                <div class="content-inner">
                  <div class="model-item">
                    <div class="model-wrap">
                      <div class="icon-box">
                        <img class="h3icon" src="/images/uploads/head_180.png">
                      </div>
                      <div class="h3text">
                        <h4 class="uppercase">Head</h4>
                        <p class="reg ">Core academic content that is aligned to specific curricular materials and research-based practices.</p>
                      </div>
                    </div>
                  </div>
                  <div class="model-item">
                    <div class="model-wrap">
                      <div class="icon-box">
                        <img class="h3icon"  src="/images/uploads/love_180.png">
                      </div>
                      <div class="h3text">
                        <h4 class="uppercase">Heart</h4>
                        <p class="reg">Teacher-led community that builds both social capital and buy-in from teachers.</p>
                      </div>
                    </div>
                  </div>
                  <div class="model-item last">
                    <div class="model-wrap">
                      <div class="icon-box">
                        <img class="h3icon"  src="/images/uploads/cycle_180.png">
                      </div>
                      <div class="h3text">
                        <h4 class="uppercase">Habits</h4>
                        <p class="reg">Professional learning that is structured around repeated cycles of inquiry. </p>
                      </div>
                    </div>
                  </div>

This does not match what is in the deploy packages I download from Netlify, in which div.icon-box clearly doesn’t close after the enclosed <img tag:

<div class="model-wrap"><div class="icon-box"><img class="h3icon" src="/images/uploads/head_180.png"/><div class="h3text"><h4 class="uppercase">Head</h4><p class="reg">Core academic content that is aligned to specific curricular materials and research-based practices.</p></div>
3

Just ran a second local test with Docker and the build-image repo using the version of Node Nelify says it’s using. Same result. Log looks fine, and when I inspect the built files the tags are closed as they should be.

export NODE_VERSION=10 NODE_ENV=production HUGO_VERSION=0.61.0 HUGO_ENV=production; build hugo -v
4

After lots of investigation, I have been able to replicate this by adding the --minify flag to the build command (like so):

export NODE_VERSION=10 NODE_ENV=production HUGO_VERSION=0.61.0 HUGO_ENV=production; build hugo -v --minify

So I’m assuming this is a hugo bug and have reported it there. I hope this is helpful for someone.

1 Like
5

thanks tons for sharing this!