Development

Automatically Deploy a Hugo Site with GitLab CI/CD

Automatically Deploy a Hugo Site with GitLab CI/CD #

I wanted publishing a change to this site to be more than a reminder to log in to the server and run Hugo by hand. My GitLab pipeline connects to my Hugo server and builds the site there when I push to master.

This setup uses a self-hosted GitLab Runner that can reach the Hugo server on my home network. The pipeline does not upload a build artifact: the server has its own checkout of the blog repository, and the deploy job pulls the latest changes before running Hugo.

Resolving Git Submodule Tracking Issues

Resolving Git Submodule Tracking Issues #

The Problem #

I recently encountered a frustrating Git issue with my Hugo blog setup. I had installed the Hugo Book theme as a Git submodule for my static site, but for some reason there were a bunch of changed files showing up in the theme’s directory even though I had never run git submodule update or made any intentional changes to it. At the time, I didn’t really understand how submodules work, so I tried adding it to .gitignore thinking that would solve the problem.

Setting Up Pre-commit Hooks

Setting Up Pre-commit hooks #

What are they? #

Pre-commit hooks are automated scripts that run before each commit, helping you catch issues early and maintain consistent code quality.

Steps #

  • Installing and configuring pre-commit
  • Setting up hooks for markdown files

Installation #

First, install pre-commit using pip:

pip install pre-commit

Configuration #

Create a .pre-commit-config.yaml file in your repository root:

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.4.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-added-large-files
      - id: check-case-conflict
      - id: check-merge-conflict

What Each Hook Does #

Basic Hooks #

  • trailing-whitespace: Removes trailing whitespace from lines
  • end-of-file-fixer: Ensures files end with a newline
  • check-yaml: Validates YAML syntax
  • check-added-large-files: Prevents accidentally committing large files
  • check-case-conflict: Catches case conflicts that would cause issues on case-insensitive filesystems
  • check-merge-conflict: Detects merge conflict markers

For a complete list of all available hooks, check out the pre-commit-hooks repository.

How to Make a New Post on Hugo

Creating New Posts in Hugo #

Hugo is a fast and flexible static site generator written in Go. Creating new posts is straightforward once you understand the basic workflow. This guide is mostly for myself since I don’t always remember how the process goes.

Step-by-Step Process #

1. Navigate to your Hugo site directory #

/var/lib/snapd/void/blog

2. Create a new post using Hugo CLI #

hugo new content content/docs/hugo-post.md

3. Edit the post content #

vim content/docs/hugo-post.md

Edit the front matter (title, date, draft status) and add your content in Markdown.