Updated content in old posts.
This commit is contained in:
Hamza Ahmed
@@ -3,56 +3,48 @@ title: HUGO Static Site Generator
|
||||
date: 2021-12-26T00:23:22Z
|
||||
author: "ahmza"
|
||||
draft: false
|
||||
weight:
|
||||
weight:
|
||||
|
||||
tags: ["blog","website","web development","HUGO"]
|
||||
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-static-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
|
||||
|
||||
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
|
||||
_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
|
||||
JS. The main benefit of using such methods to crate a static 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:
|
||||
Some of the disadvantages (for me):
|
||||
|
||||
* A lot more backend work
|
||||
* Harder to manage content
|
||||
* Editing and creating content can be a pain
|
||||
- A lot more infrastructure setup (for my setup)
|
||||
- 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/posts/building-a-docker-swarm-with-pis)
|
||||
I do feel I made this more complicated than it needed to be, however now
|
||||
that I have it working the workflow is great.
|
||||
**This is to no fault of _HUGO_ itself but the complexity of 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/posts/building-a-docker-swarm-with-pis) I do feel
|
||||
I made this more complicated than it needed to be, but 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
|
||||
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.
|
||||
content. Finding solutions for these challenges that makes this interesting.
|
||||
|
||||
## **Then Why?**
|
||||
|
||||
@@ -62,47 +54,34 @@ 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.
|
||||
Some advantages of static sites in general:
|
||||
|
||||
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.
|
||||
- Security
|
||||
- Reliability
|
||||
- Scalability
|
||||
- Low Resource Requirement
|
||||
|
||||
Although the pursuit of speed brought me to _HUGO_, here are a few other great
|
||||
reasons:
|
||||
|
||||
- Git
|
||||
- Markdown
|
||||
- Simplicity
|
||||
- Live Preview
|
||||
|
||||
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.
|
||||
|
||||
Markdown is quick, gives me what I need and doesn't require me to right click.
|
||||
|
||||
_HUGO_ allows you to import pre-made themes or if your feeling up to it, make
|
||||
your own.
|
||||
|
||||
Although at the start _HUGO_ seemed difficult to me I managed to learn and
|
||||
appreciate the simplicity it brings to the table. My workflow is not perfect 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
|
||||
@@ -110,7 +89,7 @@ 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.
|
||||
You've had a quick intro to _HUGO_ and why I choose to use it, I wrote another
|
||||
post on setting up a _HUGO_ site from start to finish.
|
||||
|
||||
[Setting Up a HUGO Site](https://blog.ahmza.com/posts/setup-a-hugo-site)
|
||||
[Setting Up a _HUGO_ Site](https://blog.ahmza.com/posts/setup-a-hugo-site)
|
||||
|
||||
Reference in New Issue
Block a user