---
title: My Hugo Workflow
description: 
tags: [Github, HUGO, Kubernetes, RPIC]
author: ahmza
date: 2024-12-01
draft: true
weight: 
featureimage: 
lastmod: 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.
- <https://github.com>

### HUGO

#### Prerequisites

Make sure you have the following packages installed.
- git: <https://git-scm.com/book/en/v2/Getting-Started-Installing-Git>
- go: <https://go.dev/dl/>

On Arch Linux

``` bash
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:
- <https://gohugo.io/installation/>

on Arch Linux

``` bash
sudo pacman -S hugo
```

> Note: Most commands from this point on are universal

#### Create a New Site

``` bash
hugo new site your-site-name && cd your-site-name
```

#### Setup Git

While inside your HUGO site folder, initialise it as a git repository

``` bash
git init
```

Set variables which will be used as the author in git commits.

> Note: remove the `--global` flag if you only want to set these variables for this git repository

``` bash
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.
- <https://themes.gohugo.io/>

Make sure to follow the install and configuration instructions for the theme you decide to pick.

My site uses the Blowfish theme
- <https://blowfish.page/>

as for my specific configuration see:
- <https://github.com/blog-ahmza-com-public>

> 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

```bash
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

```yaml
# 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

## Conclusion