blog-ahmza-com/content/posts/hugo-site-generator.md

---
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)