Experience With Hugo

Building a personal site is never an easy task, although there are tools and frameworks available for web developers to aid in the building process. In this blog, I will share with you my Hugo development experience and the bits of knowledge I’ve gained when building my personal blogging site.

What is Hugo?

Short answer: Hugo is an open-source framework for web developers. It is a modern static site generator written in Go and is designed to build websites with great flexibility and developer experience. It offers a wide variety of features that aim to streamline efficiency and modularity. To learn more about Hugo, you may visit their website.

Why I chose Hugo

When I first thought of doing a blog site, Hugo was not the first option I came up with, but it was Jekyll due to my past experience with package and artifact pages. Upon doing more research behind Jekyll, I came to the conclusion to use Hugo instead due to its build time performance and for me to explore a little bit of Go through go-templating.

I’m not an expert on comparing nor have used these two great tools side by side, but it became a personal preference based on the resources available online and due to the fact that Go has been gaining traction for sometime now. Doing research is a must before deciding on the tools to use.

My experience

Trying out new technologies is fun, especially when used on a pet project, but it requires dedication and hard work in order to grasp different concepts. During this time, my initial idea for building a blog site with Hugo was to use a pre-made theme, do content, and forget behind-the-scenes stuff such as layout, types of pages, etc.

I then began to use a theme I liked, explore its features and after a while, it began to throw errors that I’m unfamiliar with. This motivated me to create my own theme from scratch and learn more about Hugo.

I browsed Hugo’s documentation and got overwhelmed with concepts; however, the docs were properly structured and I took the time to read the necessary ideas, which I will enumerate below along with my experiences and knowledge gained. I will not go into detail regarding these concepts, but references are included:

• Go templating - the templating syntax of Go language might look strange at first, but it gets the job done really well. There are times when boolean expressions tend to look complex due to how they are structured. Know more about go-templating and its syntax.

• Content management - hugo uses file-based routing for organizing its content stored in the content/ directory. Index files serve as the front matter for home (single) and section or taxonomy pages (list). Section pages are stored in subdirectories like content/(blog|posts)/. Pages are bundled as either leaf (single page) or branch (list of pages) bundle. Know more about content management.

• Context - is one of Hugo’s significant concept. The context holds the data about the current page including available global methods that are accessed through dot notation .(Title|Site|etc). However, things get a little bit strange when doing iteration. Loops create its own context using the current item being iterated, but through global context, data outside the context of a loop can be accessed by prefixing a dollar sign: $(variable|global-context). More info about context.

• Taxonomies - I’m a huge fan of how Hugo organizes or groups its pages through taxonomies. The default taxonomies are tags which are currently used for this site and categories. Each taxonomy can have terms that are assigned to pages. There are different types of pages associated with taxonomy. Taxonomy pages can list terms for a taxonomy (tags, categories, etc.), while taxonomy term pages can list the pages that are within a given taxonomy term. These pages can be accessed and iterated through taxonomy methods.

• Base template and blocks - I’ve been puzzled by how Hugo renders its content, but I got used to it. Hugo provides a base template that serves as an outer shell or overarching layout where other templates (single or list) are rendered or injected based on the kind of page being visited (home, section, or taxonomy). Templates can be overridden, and Hugo maintains a lookup order to locate a template. Targeting a specific template can be done by configuring the page markdown file to match the name of the template. Learn more about base templates.

• Pagination - limiting the amount of content being displayed makes it easier to navigate a list page. Hugo has a built-in paginator that works a collection of pages or slice of data as its parameter. I manage to create simple pagination functionality for listing posts using the available methods. The paginator size can be configured in the toml file. Learn more about pagination and its methods.

These are the concepts I would like to share based on my Hugo experience. Hugo offers a wide variety of functions and features out of the box that are left undiscussed due to having no experience yet. Nonetheless, the documentation website is a gateway to knowledge that will surely aid us developers when developing with Hugo.

Overall experience

So far, using Hugo as a tool to build my personal blogging site has been a great learning experience. Though it was rough at first glance, through dedication, concepts can be grasped and applied. This blog is not sponsored by Hugo and I highly recommend it for building websites of various purposes with reasonable complexity. The bits of knowledge gained were a huge factor and I’m glad to share them with you through this blog.