CircleCI builds failing

support
1

Forgive me if this isn’t the place, but my CircleCI builds began failing today rather out of the blue.

This is my .circleci/config.yml file:

version: 2
jobs:
  build:
    docker:
      - image: cibuilds/hugo:latest
    working_directory: ~/hugo
    environment:
      HUGO_BUILD_DIR: ~/hugo/public
    steps:
      - run: apk update && apk add git
      - checkout
      - run: git submodule sync && git submodule update --init
      - run: curl -L https://github.com/bep/s3deploy/releases/download/v2.3.1/s3deploy_2.3.1_Linux-64bit.tar.gz | tar xvz
      - run: HUGO_ENV=production hugo -v -d $HUGO_BUILD_DIR
      - run: htmlproofer $HUGO_BUILD_DIR --allow-hash-href --check-html --empty-alt-ignore --disable-external
      - deploy:
          name: deploy
          command: |
            if [ "${CIRCLE_BRANCH}" = "master" ]; then
              ./s3deploy -source=$HUGO_BUILD_DIR -region=us-east-2 -bucket=example.com -distribution-id=XXXXXXXXXXXXXX -public-access
            else
              echo "Not master branch, dry run only"
            fi

and here’s the error i’m facing:

#!/bin/bash -eo pipefail
htmlproofer $HUGO_BUILD_DIR --allow-hash-href --check-html --empty-alt-ignore --disable-external
Running ["HtmlCheck", "ScriptCheck", "ImageCheck", "LinkCheck"] on ["~/hugo/public"] on *.html... 


Ran on 37 files!


- ~/hugo/public/events/index.html
  *  463:45: ERROR: htmlParseEntityRef: expecting ';' (line 463)
  *  463:52: ERROR: htmlParseEntityRef: expecting ';' (line 463)
  *  463:59: ERROR: htmlParseEntityRef: expecting ';' (line 463)
  *  464:45: ERROR: htmlParseEntityRef: expecting ';' (line 464)
  *  464:52: ERROR: htmlParseEntityRef: expecting ';' (line 464)
  *  464:59: ERROR: htmlParseEntityRef: expecting ';' (line 464)
- ~/hugo/public/events/metro-west-community-leader-mixer/index.html
  *  540:45: ERROR: htmlParseEntityRef: expecting ';' (line 540)
  *  540:52: ERROR: htmlParseEntityRef: expecting ';' (line 540)
  *  540:59: ERROR: htmlParseEntityRef: expecting ';' (line 540)
  *  541:45: ERROR: htmlParseEntityRef: expecting ';' (line 541)
  *  541:52: ERROR: htmlParseEntityRef: expecting ';' (line 541)
  *  541:59: ERROR: htmlParseEntityRef: expecting ';' (line 541)
htmlproofer 3.10.2 | Error:  HTML-Proofer found 12 failures!
Exited with code 1

Could anyone point me in the right direction? I’m a little at a loss of how to even begin to debug this. Thanks in advance!

2

Have you looked at the html files listed in the output?

3

Thanks @zwbetz, yes…

The /events/index.html was an existing page, and here’s what i can pull from the file in the S3 bucket, lines 462 to 465:

srcset="https://mysite.imgix.net/2019/01/DSC_0108.jpg?w=630&auto=format 1x,
        https://mysite.imgix.net/2019/01/DSC_0108.jpg?w=630&fit=max&q=40&dpr=2&auto=format 2x,
        https://mysite.imgix.net/2019/01/DSC_0108.jpg?w=630&fit=max&q=20&dpr=3&auto=format 3x"
src="https://mysite.imgix.net/2019/01/DSC_0108.jpg?w=630&auto=format"

The /events/metro-west-community-leader-mixer/index.html was created today by my client via foresty.io and the generated html file is not showing up in my S3 bucket at all.

4

Going off the error message, it’s like html proofer doesn’t like something to do with the html character encoding

5

Hmm, i was having a really hard time getting Hugo to not escapte the & character (using safeHTML didn’t help), which is why i settled on the print function, which you can see in my image template here:

{{ $src := print $.imgixURL .src "?" }}
{{ $imgixDefaults := "auto=format" }}
srcset="{{ $src }}{{ with $.imgixParams }}{{ print . "&" }}{{ end }}{{ $imgixDefaults }} 1x,
        {{ $src }}{{ with $.imgixParams }}{{ print . "&" }}{{ end }}fit=max&q=40&dpr=2&{{ $imgixDefaults }} 2x,
        {{ $src }}{{ with $.imgixParams }}{{ print . "&" }}{{ end }}fit=max&q=20&dpr=3&{{ $imgixDefaults }} 3x"
src="{{ $src }}{{ with $.imgixParams }}{{ print . "&" }}{{ end }}{{ $imgixDefaults }}"

Perhaps there’s a better way to approach this?

6

I’ve seen folks do it like this:

{{ $some_var | htmlUnescape | safeHTML }}
7

Thanks for taking time with me on this.

No errors are thrown on my local instance—the site builds just fine. It’s only the circleCI build that’s failing. I made the change you suggested, but the problem continues.

{{ $src := print $.imgixURL .src "?" }}
{{ $imgixDefaults := "auto=format" }}
srcset="{{ $src }}{{ with $.imgixParams }}{{ print . "&" | htmlUnescape | safeHTML }}{{ end }}{{ $imgixDefaults | htmlUnescape | safeHTML }} 1x,
        {{ $src }}{{ with $.imgixParams }}{{ print . "&" | htmlUnescape | safeHTML }}{{ end }}fit=max&q=40&dpr=2&{{ $imgixDefaults | htmlUnescape | safeHTML }} 2x,
        {{ $src }}{{ with $.imgixParams }}{{ print . "&" | htmlUnescape | safeHTML }}{{ end }}fit=max&q=20&dpr=3&{{ $imgixDefaults | htmlUnescape | safeHTML }} 3x"
src="{{ $src }}{{ with $.imgixParams }}{{ print . "&" | htmlUnescape | safeHTML }}{{ end }}{{ $imgixDefaults | htmlUnescape | safeHTML }}"

I’m tempted to try and disable the html proofer. :roll_eyes:

8

Hmm so are you expecting this in your output?

&
9

Also, this post may be useful in your case, to change the template output type to plain text: HTML comment handling regression between 0.55.6 and 0.54.0

10

Nope, that & should be an (unescaped) &.

I checked on the image my client uploaded, and it contains spaces in the file name, Community Leaders Dinner.jpg.

I store this site’s media in a separate S3 bucket. So one of the files in question lives here: https://s3.us-east-2.amazonaws.com/media.metrowestcle.org/2019/07/Community%20Leaders%20Dinner.jpg

And, so far as i can tell, the other file in question is here: https://s3.us-east-2.amazonaws.com/media.metrowestcle.org/2019/01/DSC_0108.jpg

So i’m trying to narrow down on what’s causing the html proofer to fail the build:

  1. The ampersand escaping
  2. Files with special characters (e.g. spaces and capital letters)
  3. Some combination of both.
11

My guess is #1. Did you see my link for how to change the template output type to plain text?

12

Thanks again @zwbetz, i removed the spaces from the image file name and that cleared the build error, but the escaped & remains.

Before removing the spaces from the file name, here’s what i found for one of the pages throwing up the error:

<img srcset="#ZgotmplZw=730&amp;auto=format 1x,
             #ZgotmplZw=730&amp;fit=max&amp;q=40&amp;dpr=2&amp;auto=format 2x,
             #ZgotmplZw=730&amp;fit=max&amp;q=20&amp;dpr=3&amp;auto=format 3x"
  src="https://metrowestcle.imgix.net/2019/07/Community%20Leaders%20Dinner.jpg?w=730&amp;auto=format"
  alt="community leaders at dinner">

(Notice the wonky srcset paths.)

When i removed the spaces from the file name, i got proper paths:

<img srcset="https://metrowestcle.imgix.net/2019/07/community-leaders-dinner.jpg?w=730&amp;auto=format 1x,
             https://metrowestcle.imgix.net/2019/07/community-leaders-dinner.jpg?w=730&amp;fit=max&amp;q=40&amp;dpr=2&amp;auto=format 2x,
             https://metrowestcle.imgix.net/2019/07/community-leaders-dinner.jpg?w=730&amp;fit=max&amp;q=20&amp;dpr=3&amp;auto=format 3x"
  src="https://metrowestcle.imgix.net/2019/07/community-leaders-dinner.jpg?w=730&amp;auto=format"
  alt="community leaders at dinner">

But, as you can see, the & continues to escape. I did check out that link and am investigating integrating into my project. Honestly i’m hesitant to make a change at the configuration level, since it seems as though my templates should work as is. This feels more like a bug. But i may have no choice—and i’m glad to have the recommendation from you. Truly appreciate your help.

13

The error states that it EXPECTS ; and doesn’t get it. This is the case in the &-attributes AFTER the first escaped &amp;. Try converting them to &amp; and it receives the ; it looks for.

You did not share much of your code, but this blackbox example looks to me as if you are using some HTML version that requires parameters in urls to be escaped. I remember having to do this back in the days of HTML 4.1 Transitional.