Andrea Spada
Andrea Spada
The nerdy craftsman behind that mess...
Nov 14, 2020 3 min read

Hugo Is the New Black

So, finally I see that Hugo is the way to go.

Premisses

Indeed, it’s hard to find a static site generator which allow for a clever organization and maintance of side-by-side languages, either for content or for user interaction. Modern generator, like gatsby or next, seems much more oriented toward web app creation, when you have a somewhat fixed and limited translation of resources. Assets also happens to spread to the wole source tree, which can quite confusing after a while… that’s why Hugo is a no brain choice.

What’s the fuss about?

Hugo has matured very much in last years, and it allow for many kind of possible organization of your sources. Actually, it’s so configurable, you can have the source laid out as you wish! And it has multi language support from the very beginning. By now, you can have it build your multi language website in various ways (separated http://your-website/$lang folders, or http://$lang.your-website/ domain, for example), and its’pretty easy to start with: just name a markdown file as yourfile.$lang.md (yourfile.en.md, yourfile.it.en, etc…) and, if properly configured, hugo render the file at its correct place. It has all the goodies you can expect from a fully fledged multi-language aware website generator (custom slug, string translations, etc…) but where it really shine, to me, is its bundled page solution.

What’s a bundle?

Hugo can manage your content both as simple markdown files, or as a folder, which allow you to group resources. You can have two kind of resources bundle: leaf or branch.

What is a Leaf Bundle?

Those replace the previously known yourfile.md file with a folder, named yourfile/, which contain an index.md (which has the content of yourfile.md) and everything related to it: images, documents, assets… everything inside this folder become a page resources, which you can refer by and process inside hugo templates. Sweet.

And a Branch Bundle is?

A branch bundle is a collection of shared attachments for section pages, which lives in a folder names yoursection/, and which has a file named _index.md. Each resources contained in a branch bundle (images, pdf, etc…) can be referred as living in the root of the section (yoursection/mygreatimage.jpg, yoursection/anothergreatimage.jpg, yoursection/documentation.pdf, …).

Ok, so what?

For a translator, the leaf bundle is a real savior: you can have a single folder, mytranslatedpage/, with as many index.$lang.md inside you need, and they will stay well organized both in the rendered website and in your sources as well. Just entering the folder you see which languages your content is translated to, and whith simple bash scripts you can create reports which tell you which files need translations - both for named languages, or which languages it lacks - and everything stay compacted. Lovely!

Shared resources!

Also, as the resources for each post lives in the very same folder, you don’t need to duplicate them - or have translations refer to far away resources - and, if you need, you can also have localized resources, like myheader.en.jpg, myheader.it.jpg, and so on. Awesome!