117 lines
4.5 KiB
Markdown
117 lines
4.5 KiB
Markdown
---
|
|
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)
|