Hugo Setup

Hugo Setup

July 14, 2023

Hugo Gitlab Hetzner Setup #

How to set up the Hugo static site generator using gitlab pages and a hetzner subdomain. #

Prerequisites #

See gohugo.io for details.

  • Install Git
  • Install Hugo (extended edition, v0.112.0 or later)

Getting some context before starting #

A helpfull video by Luke Smith, together with his github repo about Hugo helps understand the structure of hugo a little quicker.

Setting up a git repository and pushing it to gitlab #

Following the manual on gohugo.io we create our repository like this.

git init

# add /public directory to our .gitignore file
echo "/public" >> .gitignore

# commit and push code to master branch
git add .
git commit -m "Initial commit"
git remote add origin git@gitlab.com:YourUsername/your-hugo-site.git
git push -u origin main

Adding a theme as a go module #

Let’s have a look at this guide and follow the steps described.

  1. First we Clean up the old way of setting a theme

    • Remove the theme variable from your site config. Remove the themes directory, or move it out of your Hugo site repo. If you were cloning a theme developed by someone else in there, you can just remove this directory. If you are maintaining your own theme in that directory, move it out of your site repo and convert it to a Hugo Module.

  2. Second we initialize our repo as a go module

    • config.toml can’t have a theme section for this right now
    • we need to type this command hugo mod init gitlab.com/username/repo
    • as go tells us if was successful now type hugo mod tidy and out theme will be installed as a module.

  3. Now we go on Import the “theme” module

    • The theme is quoted in this title, because the concept of a Hugo “theme” is a bit old now (<2022-05-26 Thu>) and that has been superseded with the concept of “modules”.

Adding the CI / CD pipeline to the repo #

The standard pipeline looks like this, you can find it on gohugo.io

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  rules:
  - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

But we need to add something to make it work for us. We need to change the THEME_URL to our desired theme.

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

variables:
  HUGO_ENV: production
  THEME_URL: "github.com/theNewDynamic/gohugo-theme-ananke"

default:
  before_script:
    - apk add --no-cache go curl bash nodejs
    - hugo mod get -u $THEME_URL
    ## Uncomment the following if you use PostCSS. See https://gohugo.io/hugo-pipes/postcss/
    #- npm install postcss postcss-cli autoprefixer

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  rules:
  - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH