4.1 KiB
title, description, tags, author, date, draft, weight, featureimage, lastmod
| title | description | tags | author | date | draft | weight | featureimage | lastmod | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| My Hugo Workflow |
|
ahmza | 2024-12-01 | true | 2024-12-02 |
Introduction
I have worked on my blog authoring process for a couple of years now and the workflow has not been convenient, previously I would have to write the blog posts push them to Gitlab then SSH to my RPIC cluster to rebuild the kubernetes pods with the new image.
Although I had implemented the CI part of the workflow through Gitlab pipelines the CD part of the process was always manual. And so even for small changes I would need to go through that while process which made writing blog posts inconvenient.
Recently I started to migrate my projects to Github and so I had to rewrite the CI to work with Github Actions, while in the process of doing this I wanted to have a go at tackling the CD part of the workflow. And I managed to do it !!!
I feel like the workflow is finally in a state where I can share and others will benefit. By no means is this perfect and I am open to suggestions for any improvements.
Note: CI/CD stands for Continuous Integration / Continuous Development
Overview
{{< mermaid >}} graph LR; A[Write]-->B[Push to Github]; B-->C[Github Actions] C-->D[🎉] {{< /mermaid >}}
Getting Started
My workflow uses Github Actions which are not compatible with Gitlab. So if you are following along be sure to create a Github account.
HUGO
Prerequisites
Make sure you have the following packages installed.
On Arch Linux
sudo pacman -S git go
Installing HUGO
Next we need to install the HUGO binary, there are multiple ways to do this so find the method that suits your needs here:
on Arch Linux
sudo pacman -S hugo
Note: Most commands from this point on are universal
Create a New Site
hugo new site your-site-name && cd your-site-name
Setup Git
While inside your HUGO site folder, initialise it as a git repository
git init
Set variables which will be used as the author in git commits.
Note: remove the
--globalflag if you only want to set these variables for this git repository
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
Installing a Theme
Hugo has a themes store which is a great resource to explore and find the theme that fits your needs.
Make sure to follow the install and configuration instructions for the theme you decide to pick.
My site uses the Blowfish theme
as for my specific configuration see:
Note: I prefer using the HUGO module method for installing the theme I use as it excludes the example site making it lighter and in turn making Github Actions quicker.
Test HUGO
hugo server -D
- The -D flag will build draft posts, we will get to that later.
Optional Steps
Adding Front Matter Front matter is the metadata of each page of our website, We can create templates to make creating posts easier.
The Front matter template I use
# Inside of the archetypes folder create a file
# posts.md
# and add the following
---
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
description:
tags: []
author:
date = '{{ .Date }}'
draft: true
weight:
featureimage:
lastmod: 2024-12-02
---
- title: automatically creates the title based on the file name
- description: description of the post
- tags: tags can help organise posts
- author: name/alias of wrote the post
- date: date the post was created
- draft: weather or not the post will be included in the final build
- weight: make posts show higher or lower in the list
- featureimage: main image of the post
- lastmod: when the post was last modified
Note: some of the front matter I use is theme specific