Testing Hugo with htmltest and GitLab CI

It is important to test your code and even static site isn’t an exception.

In this article, I will show you how to easily add tests within the CI\CD pipeline for broken links (internal links, resources, images).

First, we’re going to split our .gitlab-ci.yml into 3 stages:

  • build generates static content into the public directory
  • htmltest uses another docker image with pre-built htmltest binary and executes the test
  • pages publish the new version of the site, but only if the previous two stages were completed
image: monachus/hugo

stages:
    - build
    - htmltest
    - pages

build:
    image: monachus/hugo
    stage: build
    script:
    - hugo
    artifacts:
        paths:
        - public

htmltest:
    image: wjdp/htmltest
    stage: htmltest
    dependencies:
        - build
    script:
        - htmltest -s public

pages:
    image: monachus/hugo
    stage: pages
    script:
    - hugo
    artifacts:
        paths:
        - public
    only:
    - master

Commit & push, check the UI - works:

first test with GitLab CI passed

Lets add the artificial error, for example, link the image to .1png, but not to .png.
You can test it in the command line:

testing htmltest in cli

Commit & push - failed as expected:

now CI failed

More details:

GitLab details about the error

   

Useful links: