Manage Multiple Authors On A Static Blog Created With Hugo

As you may or may not know, The Polyglot Developer is currently using Hugo, which is a static site generator. When getting started with Hugo, the themes and documentation don’t say much when it comes to having more than one possible author producing content.

For example, as mentioned in my previous article, this site is always accepting guest contributions for technical content. There have been several tutorials contributed, but when it comes to credit, I want these tutorials to show under the authors name, not my name just because I’m the owner of the blog.

We’re going to see how to work with data templates in Hugo to create and use different authors for different articles.

Creating a Template for Each Hugo Author

In every Hugo project there is either a data directory or a themes/[theme]/data directory. Because authors shouldn’t be tied to any particular theme, we’re going to be using the root data directory, so create one if it doesn’t exist.

Anything that exists in the data directory can be used within our theme or project templates. From an organizational perspective, it is a good idea to structure our directory as the following:

data
    authors
        nraboy.json
        ccrutchley.json
        ...

Notice that we have an authors directory with a JSON file for every possible author. The naming convention doesn’t matter, but I figured the first initial followed by the last name is allows a good strategy to follow. It also doesn’t matter if you’d prefer to use YAML, TOML, or JSON. I personally used TOML for a long time, but prefer JSON.

Inside the data/authors/nraboy.json file, I might have the following:

{
    "name": "Nic Raboy",
    "bio": "Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.",
    "image": "/media/authors/nraboy.png",
    "weight": 1,
    "social": {
        "twitter": "nraboy",
        "github": "https://www.github.com/nraboy",
        "website": "https://www.nraboy.com"
    }
}

It really doesn’t matter what you include in your JSON file as long as it the fields are consistent between all your authors. If they are not consistent, you’re going to have to add a lot more validation in your theme template files. Trust me, it is easier just to keep things consistent.

Now that we have some author data, we need to apply it.

Modifying the Theme to Display the Correct Author Information

Every theme is different, so I’m going to try to be as general as possible. I hand crafted my Hugo theme, but in fairness, the whole concept for theme creation isn’t difficult or messy.

Before we get to the theme part, we need to define author front-matter for each of our blog entries. My front matter typically looks like the following:

type = "post"
draft = true
title = "Manage Multiple Authors On A Static Blog Created With Hugo"
date = "2018-04-02T07:00:00-07:00"
publishdate = "2018-04-02T07:00:00-07:00"
description = "Learn how to manage multiple authors in a statically generated blog created with Hugo using the data templates feature and simple markup."
author = "nraboy"
categories = [ "Hugo" ]
tags = [ "authors", "blogging", "template", "data" ]
slug = "manage-multiple-authors-static-blog-created-hugo"

In the above example for a particular article, notice the author field and the value that it is set to. The value matches a particular file name in our data/authors directory. It is very important that these match because the front-matter value is going to be a lookup value for the data that goes with it. The field name doesn’t really matter and every theme might vary.

This is where the fun part comes in. Inside our HTML files associated with a theme, we can include something like the following:

{{ if isset .Params "author" }}
    {{ $author := index .Site.Data.authors .Params.author }}
    {{ $author.name }}
{{ else }}
    Unknown
{{ end }}

In theory, the above only applies to HTML files for .Type of post, but you can technically have an author for page as well, so we won’t narrow it down. If an author field exists in the front-matter, we will use it to look up a particular author in the data/authors directory. The variable essentially means .Site.Data.path.to.files.

Once we have the matching data template, we can use it, or in this case print out the name.

Conclusion

You just saw how to take your single author Hugo blog and accept multiple authors. This was critical for me because I had come from WordPress which had accounts for each of my contributors. I needed to be able to give my authors proper credit and data templates was a very easy solution.

If you want to learn more about Hugo, check out my previous article on the topic titled, Use Hugo to Create Awesome Static Websites and Blogs.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.