148 lines
4.1 KiB
Markdown
148 lines
4.1 KiB
Markdown
---
|
|
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 |