How I Got Around Netlify Not Supporting Hugo Extended Using GitLab CI

As I was building a website for a charity, I wanted to host it on Netlify. Hugo had just released Hugo Pipes which would let me use SASS.

After I linked the GitLab repo containing the website to Netlify, I tried to run the initial deploy but it didn’t work. Turns out that Netlify didn’t support the extended version of Hugoat the time. While Hugo Extended is now in beta, I used GitLab CI to build and push the website rather than just link to the repo.

I initially build the website locally and dragged the files into Netlify’s dashboard, gave the site a name and found the site is at Settings>General>Site Details>API ID.

Having done that I added the following YAML to the .gitlab-ci.yml file at the root of the project’s directory.

image: node:10.15

variables:
  GIT_STRATEGY: fetch

build:
  stage: build
  before_script:
    - wget https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Linux-64bit.deb
    - dpkg -i ./hugo_extended_0.53_Linux-64bit.deb
    - apt-get install -f
  script:
    - hugo --minify
  artifacts:
    paths:
      - public

deploy_live:
  stage: deploy
  dependencies:
    - build
  variables:
    NETLIFY_SITE_ID: abcd-efgh-ijkl-mnop-qrst
  before_script:
    - npm install -g netlify-cli
    - netlify --telemetry-disable
  script:
    - netlify deploy --dir=public --prod
  only:
    - master

I used the Node Docker image so that I could run Netlify’s CLI.

The build task installs the extended version of Hugo and builds the website with the output minified. By default, the files will be built in a directory named public.

The deploy_live task then uploads the built website files (in public/) directly to Netlify. While I specified the NETLIFY_SITE_ID in the CI config, there are a few ways to specify variables in GitLab CI.

My example is kind of bare, but you can add other things around it if you need to.