Organizing Content with Series: Part 1 - Getting Started

Introduction

When creating technical tutorials, how-to guides, or any multi-part content, organizing your posts into a series helps readers follow along in the correct order. AstroZephyrus includes built-in series support that automatically creates navigation between related posts.

This tutorial is itself the first part of a series demonstrating this feature. Notice the series navigation box above? That’s generated automatically from frontmatter configuration.

What Are Series?

A series groups related blog posts together, displaying them in a specific order. Each post in a series shows:

• Series navigation widget — Lists all posts in the series with the current post highlighted
• Previous/Next links — Quick navigation between sequential posts
• Progress indicator — Shows which part of the series you’re reading (e.g., “Part 2 of 5”)
• Series archive page — A dedicated page listing all series on your blog

Why Use Series?

Series are ideal for:

• Multi-part tutorials — Break complex topics into digestible chunks
• Course-like content — Guide readers through a learning path
• Project walkthroughs — Document a project’s evolution step-by-step
• Topic deep-dives — Explore different aspects of a subject in depth

The key benefit: readers can easily navigate between related posts without getting lost or missing prerequisite content.

How to Create a Series

Creating a series requires just two frontmatter fields in your post markdown files.

Step 1: Add Series Name

In your post’s frontmatter, add a series field with the series name:

---
title: My First Post in the Series
series: Getting Started with AstroZephyrus
---

All posts in the same series must use the exact same series name (case-sensitive).

Step 2: Set Series Order

Add a seriesOrder field to specify the post’s position in the series:

---
title: My First Post in the Series
series: Getting Started with AstroZephyrus
seriesOrder: 1
---

• Use consecutive numbers starting from 1
• The order determines the sequence in the navigation widget
• Posts are sorted by seriesOrder ascending

Complete Example

Here’s the frontmatter for this very post:

---
publishDate: 2024-02-07T00:00:00Z
author: John Smith
title: 'Organizing Content with Series: Part 1 - Getting Started'
excerpt: Learn how to organize related blog posts into series...
category: Tutorials
series: Organizing Content with Series
seriesOrder: 1
tags:
  - content organization
  - series
---

The Series Navigation Component

When you add series and seriesOrder to a post, the SeriesNav component automatically appears at the top of the post content. It provides:

1. Collapsible series overview — Click the header to expand/collapse the list
2. Current post highlighting — The active post is highlighted with a distinct background
3. Clickable navigation — Jump to any post in the series
4. Sequential navigation — Previous/Next buttons for linear reading
5. Series link — The series name links to a dedicated series archive page

The component is fully responsive and styled to match your theme (light/dark mode support included).

Series Archive Pages

Each series automatically gets its own archive page at /series/{series-slug}/. For example, this series is available at:

/series/organizing-content-with-series/

The series slug is automatically generated from the series name (lowercased, spaces converted to hyphens).

On the series archive page, readers can:

• See all posts in the series listed in order
• View metadata for each post (publish date, excerpt, etc.)
• Quickly navigate to any part of the series

Best Practices

When creating series, follow these guidelines:

Naming Conventions

• Use clear, descriptive series names
• Keep names concise but informative
• Example: “Mastering Astro Components” not just “Astro”

Numbering Posts

• Start with seriesOrder: 1
• Use consecutive integers (1, 2, 3, …)
• Don’t skip numbers or use decimals

Content Structure

• Make each post self-contained where possible
• Link to prerequisite posts when necessary
• Include a brief series introduction in Part 1
• Consider adding a “What you’ll learn” section at the start

Series Length

• Aim for 3-7 posts per series (sweet spot for engagement)
• Break very long series into multiple sub-series
• Consider writing all parts before publishing for consistency

What’s Next

In the next part of this series, we’ll explore:

• Advanced series navigation patterns
• Customizing the SeriesNav component appearance
• Managing multiple series on your blog
• Series metadata and analytics

The series feature is now set up and working — check the navigation above to see it in action!

Try It Yourself

Create your first series by:

1. Opening an existing post in src/data/post/
2. Adding series: "Your Series Name" to the frontmatter
3. Adding seriesOrder: 1
4. Creating a second post with the same series name and seriesOrder: 2
5. Running npm run dev to see the series navigation appear

That’s all there is to it!