Digital Nerd's Blog

Install, Build and Deploy Hugo Site on GitLab Pages

Posted on Jun 27, 2024

Install

Go to Hugo releases page and install the desired package. In my case it will be hugo_0.128.0_linux-arm64.deb.

wget https://github.com/gohugoio/hugo/releases/download/v0.128.0/hugo_0.128.0_linux-amd64.deb

sudo dpkg -i hugo_0.128.0_linux-amd64.deb
sudo dpkg -l | grep hugo

hugo version

Note: you can also do this with the apt install -y hugo command, but keep the version in mind apt info hugo. It may not be the right one.

Create a private GitLab project

  1. Project name: digitalnerd.gitlab.io
  2. Visibility Level: private
  3. Unselect Initialize repository with a README
  4. Create project

Create a Hugo site

If you prefer yaml insted of toml, add --format parameter.

hugo new site digitalnerd.gitlab.io --format yaml
cd digitalnerd.gitlab.io

Add a source control.

git init --initial-branch=main

git remote add origin git@gitlab.com:digitalnerd/digitalnerd.gitlab.io.git

Ignore the public directory.

Note: It was in the old version, so just keep an eye on it and recheck that information.

echo "/public/" >> .gitignore

Note: don’t forget about ssh-keygen command to generate the private and public keys. Then add the public key into the GitLab.

Add a theme

Here you can find a lot of themes.

# Archie
git submodule add https://github.com/athul/archie.git themes/archie

Note: for information on how to remove a git submodule, see [[hugo - How to remove submodule]]

You should now use the hugo.yaml configuration file, which is at the root level, instead of config.yaml, which was config/_default/config.yaml.

# leave it as it is until you want to change it to a custom domain
baseURL: https://digitalnerd.gitlab.io/
languageCode: en-us
title: "Digital Nerd's Blog"
theme: archie

Add new post

hugo new content content/posts/my-first-post.md

Deploy

.gitlab-ci.yml

default:
  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo/hugo_extended:latest"

variables:
  GIT_SUBMODULE_STRATEGY: recursive

# test:  # builds and tests your site
#   script:
#     - hugo
#   rules:
#     - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:  # a predefined job that builds your pages and saves them to the specified path.
  script:
    - hugo -e production --minify
  artifacts:
    paths:
      - public 
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

git add .
git commit -m "Added .gitlab-ci.yml file"
git push

Everything should work. Go to https://digitalnerd.gitlab.io/ to check.

References