From 29dab701d51cfd2337e41ee7c09b30f27686c972 Mon Sep 17 00:00:00 2001 From: ahmzaa Date: Mon, 2 Dec 2024 02:10:02 +0000 Subject: [PATCH] new post --- content/posts/my-hugo-workflow/index.md | 148 ++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 content/posts/my-hugo-workflow/index.md diff --git a/content/posts/my-hugo-workflow/index.md b/content/posts/my-hugo-workflow/index.md new file mode 100644 index 0000000..5cae882 --- /dev/null +++ b/content/posts/my-hugo-workflow/index.md @@ -0,0 +1,148 @@ +--- +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. +- + +### HUGO + +#### Prerequisites + +Make sure you have the following packages installed. +- git: +- go: + +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: +- + +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. +- + +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 + +```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 \ No newline at end of file