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.
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
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.