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:

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

Commit & push - failed as expected:

More details:

Useful links:

• staged GitLab CI jobs in documentation;
• testing .gitlab-ci.yml on your laptop; (mirror)