adding author bio to jekyll posts

By -

Why Author Bios Matter

Author bios add credibility to your content, create a personal connection with readers, and build trust—especially for blogs focusing on education, expertise, or opinions. Jekyll gives you the flexibility to create author bios that are dynamic and easy to maintain.

Common Author Bio Challenges in Static Sites

Unlike CMS platforms with built-in user management, Jekyll doesn’t have a native concept of “users.” This means we need to implement authorship logic manually while keeping it reusable and efficient.

Step 1: Create a Data File for Authors

Create a new file under _data/authors.yml. This YAML file will contain author metadata such as name, avatar, bio, and social links.

john:
  name: John Doe
  bio: "John is a content strategist with a passion for open-source publishing."
  avatar: "/images/authors/john.jpg"
  twitter: "johndoe"
  website: "https://johndoe.dev"

sarah:
  name: Sarah Lee
  bio: "Sarah writes about SEO and digital workflows for creators and freelancers."
  avatar: "/images/authors/sarah.jpg"
  twitter: "sarahleewrites"
  website: "https://sarahlee.blog"

Step 2: Define Author in Front Matter

In each blog post, specify the author key in the front matter:

---
layout: post
title: "Using Jekyll with Netlify"
author: john
---

Step 3: Create an Include for the Bio Section

Now create a reusable component: _includes/author-bio.html

{% raw %}
{% assign author = site.data.authors[page.author] %}


  <img src="{{ author.avatar }}" alt="{{ author.name }}" class="author-avatar">
  <div class="author-info">
    <h4>Written by {{ author.name }}</h4>
    <p>{{ author.bio }}</p>
    <p>
      {% if author.twitter %}
        <a href="https://twitter.com/{{ author.twitter }}">Twitter</a>
      {% endif %}
      {% if author.website %}
        <a href="{{ author.website }}">Website</a>
      {% endif %}
    </p>
  </div>


{% endraw %}

Step 4: Add CSS Styling

Style the bio section in your CSS file:

.author-bio {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.author-info h4 {
  margin: 0;
}

Step 5: Display Bio at End of Each Post

Insert this include at the end of your post layout file (typically _layouts/post.html):

{% raw %}
{% include author-bio.html %}
{% endraw %}

Optional: Add Social Icons

Instead of plain text links, you can use icon libraries like FontAwesome or SVGs to show Twitter or website icons next to each link. This gives a more polished and professional feel.

Case Study: Personal Branding with Author Bios

A developer blog added custom author bios with images and links to GitHub and Twitter. Over 3 months, they saw a 22% increase in profile link clicks and higher time-on-page. Readers were more likely to explore related posts by the same author.

Best Practices for Author Bios

  • Use consistent formatting across posts
  • Keep the bio short but relevant
  • Update bios occasionally for accuracy
  • Add links to personal blogs, Twitter, or LinkedIn

Benefits for Multi-Author Blogs

If your Jekyll site has multiple contributors, this approach allows each author to have a unique bio shown on their posts without duplicating layout code. It also helps with branding and user trust.

Conclusion

Adding an author bio to Jekyll posts improves engagement and builds authority. By using data files and includes, you can scale this feature across hundreds of posts while maintaining a clean and consistent structure—making your Jekyll blog feel more dynamic and personal.