Notes

Add author profiles to blog posts on Hugo websites

How to show Author details with every Hugo blog post

Edit on GitHub

Hugo
2 minutes

There are multiple ways you can add authors. The following is a single author per post scenario where the author details are saved in hugo.toml. (Alternate way of doing that would be with taxonomies. The benefit of setting it up with taxonomies is that you would be able to show a page that lists all posts by that author.)

Here is how the config would look like in hugo.toml

1[author]
2  [author.aamnah]
3    name = "Lily"
4    url = "https://mysite.com"
5    bio = "a small author bio."

And here is how you would use it in a template, for example the layouts/_default/single.html file:

 1{{/*  Post Meta  */}}
 2<div class="mb-6 text-xs">
 3  {{ if .Params.author }}
 4    {{ if .Site.Author }}
 5      {{/*  
 6        index macthes are case sensitive. 
 7        'Lily' in .Params.author will not match 'lily' in .Site.Author.lily.name
 8        use lowercase strings for both for a more predictable result  
 9        */}}
10      {{ $author_name := index .Site.Author (strings.ToLower .Params.author) (strings.ToLower "name") }}
11      {{ $author_url := index .Site.Author (strings.ToLower .Params.author) (strings.ToLower "url") }}
12      {{ $author_bio := index .Site.Author (strings.ToLower .Params.author) (strings.ToLower "bio") }}
13
14      <span>By <a href="{{ $author_url }}">{{ $author_name }}</a>, {{ $author_bio }}</span> 
15    {{ else }}
16      <p>By {{ .Params.author }}</p>
17    {{ end }}
18  {{ end }}
19</div>

Related