Multiple Authors Support in Hugo Website Multiple Authors Support in Hugo Website

Ashish Lahoti
Hugo
Page content

In this tutorial, we’ll learn how to manage multiple authors in Hugo Website

Overview

When you generate a blog website using Hugo static site generator then there might be a possibility that more then one author writing the content for your blog website.

Hugo doesn’t provide any out of the box support for multiple authors. In this post, We’ll see that how we can associate an author with each article. We’ll also see how we to show author name, a short description about author on each article.

Support for Multiple Authors

Follow these steps to enable the multiple author support for your Hugo Website:

Create a Data file for Each Author

In Hugo project structure, there should a data directory at root level, create one if it doesn’t exist.

Hugo provides the ability to access the files and their content in data directory, which we are going to use to fetch author’s details. From an organizational perspective, it is recommended to structure our directory as the following:

▾ data
  ▾ authors
      ashishlahoti.json
      bobmarley.json
      charliechaplin.json
      davidbeckham.json
      ...

Notice that we have created a JSON file for each individual author in data/authors directory. The naming convention doesn’t matter but it is recommended to use first name followed by last name for consistency.

Each individual author JSON file for e.g. data/authors/ashishlahoti.json looks something like this:

{
    "name": "Ashish Lahoti",
    "bio": "Ashish Lahoti has experience in full stack technologies such as Java, Spring Boot, JavaScript, CSS, HTML.",
    "avatar": "/media/authors/ashishlahoti.png",
    "social": {
        "linkedin": "https://www.linkedin.com/in/lahotiashish"
    }
}

It is not necessary that you should follow the same JSON structure and use the same fields but it is recommended that whatever fields you add should be consistent across all your authors JSON files.

Now that we have details of all the authors in data files, let’s use them.

Use “author” in front-matter

In Hugo, We generally write an article in markdown (.md) file and add metadata about the article in front-matter. A typical front-matter of an article looks like this:

---
title: Multiple Authors Support in Hugo Website
description: Understand how to manage multiple authors in Hugo Website
date: 2020-07-26
author: ashishlahoti
categories:
  - "Hugo"
tags:
  - "authors"
  - "blogging"
  - "template"
  - "data"
images:
  - "/img/logo/gohugo.png"
---

In the above example, notice the author field and its value we’ve set. The value of the author field should match the author’s file name in data/authors directory. This is very important as we are going to get the author details from this file matching with author field value.

Default Author

We’re also going to create a default author for the articles in case “author” is not provided in the front-matter for simplicity. Default author will be used as a fallback. We can create a data/authors/default.json file in data directory.

▾ data
  ▾ authors
     default.json
     ...

Example of the default.json file:

{
    "name": "CodingNConcepts",
    "bio": "CodingNConcepts is a technical blog for developers from developers",
    "avatar": "/media/authors/codingnconcepts.png",
    "social": {
        "linkedin": "https://www.linkedin.com/feed/hashtag/codingnconcepts/"
    }
}

Display Author Details in Generated Hugo Pages

This is the interesting part. We can include the conditions like this to add author details:

{{ $author := index .Site.Data.authors (.Params.author | default "default") }}
{{- if $author -}}
    {{ $author.name }}
{{- end -}}

Note that -

  • .Site.Data.authors is used to fetch data from the data/authors directory
  • .Params.author is used to get the value of the author from front-matter of the article
  • | default "default" is used as a fallback in case author is not provided in the front-matter of the article
  • $author.name will get the name field value from that particular author JSON file

Practical Usage

You can create a partial author to show author name in Hugo pages like this:

layouts/partials/author.html
{{ $author := index .Site.Data.authors (.Params.author | default "ashishlahoti") }}
{{- if $author -}}
    <div class="meta_item">
        {{ partial "svg/author.svg" (dict "class" "meta_icon") -}}
        <span class="meta_text">{{ $author.name }}</span>
    </div>
{{- end -}}

The Author svg icon used as below:

layouts/partials/svg/author.svg
<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-author" width="16" height="16" viewBox="0 0 12 16"><path d="M6 1c2.2 0 3.5 2 3.5 4.5C9.5 7 8.9 8.2 8 9c2.9.8 4 2.5 4 5v1H0v-1c0-2.5 1.1-4.2 4-5-.9-.8-1.5-2-1.5-3.5C2.5 3 3.8 1 6 1z"/></svg>

You can also create a partial authorbox to show author details at the end of the page like this:

layouts/partials/authorbox.html
{{- if .Param "authorbox" }}
{{- $author := index .Site.Data.authors (.Params.author | default .Site.Author.code) -}}
<div class="authorbox">
    {{- with $author.avatar }}
        <figure class="authorbox__avatar">
            <img alt="{{ $author.name }} avatar" src="{{ $author.avatar | relURL }}" class="avatar" height="90" width="90">
        </figure>
    {{- end }}
    {{- with $author.name }}
        <div class="authorbox__header">
            <span class="authorbox__name">About {{ . }}</span>
        </div>
    {{- end }}
    {{- with $author.bio }}
        <div class="authorbox__description">
            {{ . }}
        </div>
    {{- end }}
</div>
{{- end }}

Show List of Articles of Individual Author

Once you enable multiple author support for your Hugo Website. Next requirement comes where you want to display list of articles of individual author. Follow these steps:

Define an “author” taxonomy

Define an “author” taxonomy similar to tag and category in your Hugo configuration file.

config.toml
[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"

Add “authors” field in front-matter

Add the “authors” field in the front-matter of the article similar to tags and categories. Note that you can associate multiple authors in “authors” field just like you can have multiple tags and categories.

---
title: Multiple Authors Support in Hugo Website
description: Understand how to manage multiple authors in Hugo Website
date: 2020-07-26
author: ashishlahoti
categories:
  - "Hugo"
tags:
  - "authors"
  - "blogging"
  - "template"
  - "data"
images:
  - "/img/logo/gohugo.png"
authors:
  - ashishlahoti
---

If multiple authors have contributed to an article then “author” field can have primary author and “authors” field can have all the authors including primary author.

That’s it. You should be able to access the list of articles of a particular author using similar url:

http://localhost:1313/authors/ashishlahoti/

Also list of all the authors would be accessible using this url:

http://localhost:1313/authors/

Conclusion

We saw that how we can manage multiple author details in their individual JSON files and how we can fetch the details from those files to display author name, bio (short description), avatar and social media contact details etc. We’ve also seen how we can show the list of articles of individual author.