I recently started contributing to free and open-source software, but that’s a story for another day. So well I stumbled upon a bunch of projects with issues open which required help in either completely writing new documentation using Hugo or migrating the existing documentation to Hugo. I was naturally curious why so many organizations were willing to make that shift. So I started my research and this is what I learned about Hugo.

Why Hugo ?

Jekyll, VuePress, Gatsby, Gridsome, Hugo !!! Where does one honestly start 🤷🏾‍♀️

Well Hugo, as well as the above-mentioned technologies are collectively known as static site generators. Static site generators are in layman’s terms applications which are used to create static HTML websites.

Static websites display web content in the user’s web browser exactly as it is stored in the server. Hence every user who visits a static site interacts with exactly the same content. Whereas conversely we have dynamic websites which serve content on a user’s browser as it is generated by web applications. Web applications make use complex server-side calls which in turn enable dynamic content to be served to each and every user who visit the site if need be.

Static site generators work by parsing content which is normally written in either Markdown and/or templating languages, layouts and other meta data and then converting all the source files into HTML. It’s important to appreciate that when ever there is a change in the source code, the static site generator re-builds the whole website all over again and uploads it to the server.

Advantages of using static site generators :

• Better SEO: as all web content is served in simple HTML web scrapers can easily search the site.
• Speed: there are no calls made to external databases, static sites are served pretty fast in comparison to dynamic websites.
• Improved security since: static sites are independent of databases they are basically hacker-proof.

Hugo, stands out because:

• Its open-source.
• Its incredible fast 🚀, it is the fastest static site generator to date. Hugo is written using Golang , using Go makes Hugo build processes incredible fast!
• It has a wide variety of themes which make it easy to create a static website, you don’t have to start from scratch.

So far the only cons I came across when using Hugo were that to fully harness its power you have to know Go. Knowing a little bit of Go gives you so much power in tweaking up themes, which is rather important if you want to give a unique feel to your site despite it being created from a theme. I also would love to express the fact that it took me time to warp my head around how Hugo works despite coming from a solid background in front-end development. So the learning curve is quite steep.

My experiences using Hugo

My preferred method of learning a new technology is through watching video tutorials. So for an intro to using Hugo for my personal blog I found the following video tutorials useful.

1. Building a Serverless Blog with Hugo and Netlify

2. Hugo - Static Site Generator | Tutorial

After going through the tutorials I followed the Hugo official documentation on getting started. My theme of choice was Anubis, I chose it because its styling is minimalist and clean and most importantly the styling wasn’t too opinionated I had lots of room to play around and tweak the styling without having to change a lot of the original styling.

Other Technologies used in creating my blog

1. FormSpree: is basically a delivery service, it collects form data and then sends email alerts when forms are submitted on static websites. Its integration into a static website is very easy and seamless.
2. Github Pages : my site was hosted on GitHub pages, to learn more about Github Pages site hosting service read this. Hosting a Hugo site on Github pages isn’t a straight-forward task. I advise you to check out the official documentation here on how that can be done.

Making it even better for non-techies | Integrating Hugo with CMSes

Hugo can be bundled with headless content management systems like DatoCMS to enable it to be harnessed for use by users from non-technical background. Read DatoCMS official documentation to find out about how that can be achieved.