Hugo

2022-12-31 20:59:25 +00:00
parent 644dedae3a
commit 7fe6e0ec56
10 changed files with 119 additions and 68 deletions
@@ -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)