Merge branch 'hugo' into 'main'

Hugo

See merge request AHMZA/blog!12

.gitignore

@@ -1 +1,2 @@
 .hugo_build.lock
+.DS_Store

README.md

@@ -1,57 +0,0 @@
-# blog-hugo
-
-This is probably the hundredth rendition of this site xD Previously to
-using HUGO my blog was built using GHOST CMS which is a great platform
-and is feature rich. However my problem came with the base design
-philosophy of a CMS, relying on a Database.
-
-HUGO is a static site generator meaning it takes a readable file format
-like markdown and then compiles all that down into HTML (Static Files)
-This removes the need for a database and in turn improves performance of
-the site ten fold.
-
-## Pros of static sites
-
-* Security
-* Reliability
-* Speed
-* Scalability
-* Low Resource requirement
-
-## Cons of a static site
-
-* Less user friendly
-
-## Why
-
-The reasons above all fit within my goal of trying to containerise
-services running in my home lab.
-
-The plan is to move the services I use to a cluster of Raspberry Pis. As
-long as the services have an ARM image or I can build an ARM image then
-this is a viable solution
-
-## How
-
-The deployment method of this site relies on the Gitlab CI/CD pipeline.
-* Clone the repository
-* Push changes to Gitlab
-* Gitlab runners create the docker image
-* Image is pushed to my private docker repository
-* Pi cluster uses that image to host the site locally
-
-## When Pulling / Cloning
-
-Be sure to add `--recurse-submodules` as the theme used is a submodule
-
-``` bash
-git clone --recurse-submodules git@gitlab.com:AHMZA/blog.git
-```
-
-## Update the theme
-
-As the theme is a submodule it will need to be update with the following
-
-``` bash
-git submodule update --remote --merge
-```

content/posts/hugo-site-generator.md

@@ -0,0 +1,116 @@
+---
+title: HUGO Static Site Generator
+date: 2021-12-26T00:23:22Z
+author: "ahmza"
+draft: false
+weight: 
+
+tags: ["blog","website","web development","HUGO"]
+description: "HUGO is a static site generator. No idea what that is ? Check out this post to learn more !"
+canonicalURL: "https://blog.ahmza.com/Page%28/posts/hugo-site-generator.md%29"
+
+cover:
+    image: "/img/hugo/feature.webp" # image path/url
+    alt: "HUGO logo" # alt text
+    caption: "The HUGO logo" # display caption under cover
+    relative: false # when using page bundles set this to true
+
+---
+
+## **Introduction**
+
+Hugo is a static site generator, which basically means it's a tool that
+allows us to pre-compile all of our website into static HTML, CSS and
+JS. The main benefit of using such methods to crate a site is speed. A
+Static site takes a lot less time to load than a site that uses
+databases for example.
+
+## **Disadvantages**
+
+Some of the disadvantages I have come across are as follows:
+
+* A lot more backend work
+* Harder to manage content
+* Editing and creating content can be a pain
+
+**This is to no fault of hugo itself but to the unnecessary complexity
+in my infrastructure!!** Deploying the site in my environment was a
+challenge as I had to get the site files from gitlab and build a docker
+image that would compile the site as well as create an image to be
+deployed in my [docker swarm.](https://blog.ahmza.com/Page%28/posts/building-a-docker-swarm-with-pis.md%29)
+I do feel I made this more complicated than it needed to be, however now
+that I have it working the workflow is great.
+
+The content is manually managed meaning you have to create edit and
+delete posts yourself. HUGO does a great job at making this as pleasant
+of an experience as possible but coming from a CMS (Content Management
+System) it is a lot more involved.
+
+Because there is no integrated webui or CMS for Hugo, the experience
+you get when creating content will vary person to person depending on
+the environment you use to create the content. When using a CMS I took
+dragging and dropping images for granted where now I have to explicitly
+define full paths to images which can get me out of the flow of writing
+content, however it's finding solutions for these challenges that makes
+this interesting.
+
+## **Then Why?**
+
+The main reason for switching to a static site generator is speed and
+how lightweight the final product is, at the time of writing this the
+total size of the content on this site including images is ~5mb which
+is considerably smaller than a full CMS and database alone with no
+content.
+
+Some advantages of static sites in general:
+
+* Security
+* Reliability
+* Scalability
+* Low Resource Requirement
+
+Although the pursuit of speed brought me to HUGO, here are a few things
+that kept me:
+
+* Git
+* Markdown
+* Simplicity
+* Live Preview
+
+As mentioned before my initial reason for switching to a static site
+generator was speed and how lightweight the final product is, at the
+time of writing this the total size of the content on this site
+including images is ~5mb which is considerably smaller than a full CMS
+and database alone with no content.
+
+I have recently started to use git a lot more and I'm able to
+implement a content versioning system that can follow me everywhere and
+on any device very easily. It also means there is always a backup of my
+site on gitlab and I don't need to worry about backing up databases.
+
+Markdown makes life a lot easier, Its quick, easy and doesn't require
+me to right click or use buttons. Markdown is also very transferable,
+scroll up to the top of this page and hit the "Suggest Changes" button
+and you will see how a markdown file can be interpreted by not only
+HUGO but gitlab too and so many other tools.
+
+{{< video label="i love it" webm="/webm/i-love-it.webm" >}}
+
+Regarding themes, HUGO allows you to easily create your own, or just as
+easily implement other peoples themes.
+
+Although at the start HUGO seemed difficult to me I managed to learn it
+pretty quickly and appreciate the simplicity it brings to the table. I
+wouldn't say my workflow is perfect by any means but I feel HUGO makes
+it easy to develop a smooth workflow.
+
+Live Preview allows you to start up a light weight web server locally
+and has an auto refresh feature so whenever a change is made the web
+page refreshes so you can see changes without manually refreshing.
+
+## **Conclusion**
+
+This post is a quick intro to HUGO and why I choose to use it, However
+there is another post on setting up a HUGO site from start to finish.
+
+[Setting Up a HUGO Site](https://blog.ahmza.com/Page%28/posts/setting-up-a-hugo-site.md%29)

layouts/shortcodes/image.html

@@ -0,0 +1 @@
+<img src="{{ .Get "url"}}" alt="{{ .Get "alt"}}" style="display:block;margin-left:auto;margin-right:auto;width:50%;height:auto;padding:10px;">

layouts/shortcodes/video.html

@@ -1,14 +1,4 @@
-<!--
-<video autoplay loop muted playsinline aria-label='{{ .Get "label"}}'>
+<video autoplay loop muted playsinline aria-label='{{ .Get "label"}}' style="display:block;margin-left:auto;margin-right:auto;width:50%;height:auto;padding:10px;">
     {{ with .Get "mp4" }}<source src="{{ . }}" type="video/mp4">{{ end }}
     {{ with .Get "webm" }}<source src="{{ . }}" type="video/webm">{{ end }}
-    <p> Your browser does not support video. </p>
 </video>
--->
-
-<video autoplay loop muted playsinline aria-label='{{ .Get "label"}}' style="width: 100%; height: auto;">
-    {{ with .Get "mp4" }}<source src="{{ . }}" type="video/mp4">{{ end }}
-    {{ with .Get "webm" }}<source src="{{ . }}" type="video/webm">{{ end }}
-    <p> Your browser does not support video. </p>
-</video>
-