Multi-Author Support with Author Profiles

By -

Why Add Multi-Author Support

If you run a collaborative blog or want to showcase different personas on your site, adding multi-author support is essential. Mediumish comes with a single author structure by default, but it can be extended with minimal setup to display detailed author profiles and filter posts by writer, using built-in Jekyll features only.

Core Requirements

  • Each post should be assigned to an author via front matter
  • Author data should be managed in a centralized file
  • Each author should have a profile page listing their posts

Step 1: Define Author Metadata in a Data File

Create a new file called _data/authors.yml and list all your contributors with their unique keys:

jdoe:
  name: "Jane Doe"
  bio: "Tech writer & frontend developer"
  avatar: "/assets/images/jane.jpg"
  twitter: "janedoe"
  website: "https://janedoe.dev"

bsmith:
  name: "Ben Smith"
  bio: "Backend engineer who writes about performance"
  avatar: "/assets/images/ben.jpg"
  twitter: "bensmith"
  website: "https://bensmith.codes"

This structure allows clean separation between post content and author info, keeping things DRY and consistent.

Step 2: Assign an Author Key in Each Post

Update each post’s front matter to include the author key that matches the entry in your data file:

---
layout: post
title: "Jekyll on GitHub Pages: SEO Blueprint"
author: jdoe
categories: [jekyll,seo]
featured: true
---

Use short and consistent author IDs (like usernames or initials).

Step 3: Display Author Info Below Each Post

Edit the post layout (usually _layouts/post.html) and add this snippet at the bottom to show author bio and links:

{% raw %}
{% assign author = site.data.authors[page.author] %}
<div class="author-box">
  <img src="{{ author.avatar }}" alt="{{ author.name }}" class="author-avatar">
  <div class="author-info">
    <h3>{{ author.name }}</h3>
    <p>{{ author.bio }}</p>
    <p>
      <a href="{{ author.website }}">Website</a> |
      <a href="https://twitter.com/{{ author.twitter }}">Twitter</a>
    </p>
  </div>
</div>
{% endraw %}

You can style it using CSS like this:

.author-box {
  display: flex;
  margin-top: 2em;
  padding: 1em;
  background: #f0f0f0;
  border-radius: 8px;
}

.author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 1em;
}

.author-info h3 {
  margin: 0 0 0.3em;
  font-size: 1.2em;
}

Step 4: Create Author Archive Pages

To allow readers to view all posts by an author, we’ll generate author pages dynamically using a Jekyll collection or a custom layout. One common approach is to use individual markdown files per author under a directory like authors/:

// authors/jdoe.md

---
layout: author
title: "Posts by Jane Doe"
author_id: jdoe
permalink: /author/jdoe/
---

The author_id field will be used to filter posts and fetch the correct profile data.

Step 5: Build the Author Layout

Create a new layout file at _layouts/author.html with the following logic:

{% raw %}
{% assign author = site.data.authors[page.author_id] %}
<section class="author-profile">
  <img src="{{ author.avatar }}" alt="{{ author.name }}" class="author-avatar-large">
  <h2>{{ author.name }}</h2>
  <p>{{ author.bio }}</p>
  <p><a href="{{ author.website }}">Visit website</a></p>
</section>

<section class="author-posts">
  <h3>Posts by {{ author.name }}</h3>
  <ul>
    {% for post in site.posts %}
      {% if post.author == page.author_id %}
        <li><a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
</section>
{% endraw %}

Optional: Add Navigation to Author Pages

To help users discover authors, add a dedicated author index page:

// authors/index.md

---
layout: page
title: "Meet Our Authors"
permalink: /authors/
---
{% raw %}
<ul class="author-list">
{% for id in site.data.authors %}
  {% assign author = site.data.authors[id[0]] %}
  <li>
    <a href="/author/{{ id[0] }}/">
      <img src="{{ author.avatar }}" alt="{{ author.name }}">
      {{ author.name }}
    </a>
  </li>
{% endfor %}
</ul>
{% endraw %}

Real-World Use Case

A community blog migrated to this approach after outgrowing a single-author layout. With 5 active contributors, the team used:

  • _data/authors.yml for consistency
  • Author archive pages to enable filtering
  • Homepage widget showing top contributors (based on post count)

After rollout, they saw a 20% improvement in session depth and a noticeable increase in contributor visibility — which encouraged more content submission.

Benefits of This Setup

  • Scalable: Easy to add new authors
  • Customizable: Each author can have full profile and links
  • Works on GitHub Pages: No plugins, pure Jekyll

Conclusion

With just a few lines of Liquid and a clean YAML file, you can transform a single-author Jekyll blog into a collaborative publishing platform. Author pages improve credibility, navigation, and contributor recognition — all while keeping your site fully static and deployable on GitHub Pages without plugins.

In the next article, we’ll cover how to **add multilingual support to Mediumish** using Jekyll data files and Liquid conditionals — without relying on JavaScript or third-party services.