How to Set Up a Blog

This guide will walk you through the process of adding a blog to your Flowershow site. You'll learn how to create a dedicated blog section, set up a landing page that lists all your blog posts, attribute content to its authors, and keep some of your blog posts unpublished.

Step 1: Create a Blog Directory

While you can name and place your blog content anywhere in your site's structure, this guide uses a /blog directory in the root folder as an example. The key is to keep your blog posts organized in a dedicated location.

1. Choose a location for your blog content. Common options include: /blog, /posts or /articles.

This folder will contain:

• Individual blog post files (e.g., my-first-post.md)
• A landing page (README.md or index.md)
• Optional subdirectories for organization

Step 2: Add Your First Blog Post

1. Create a new markdown file in the chosen blog directory, for example: /blog/my-first-blog-post.md.

2. Add frontmatter at the top of the file. The frontmatter sets structured metadata of the page, and controls how your post appears in the List component (see next steps) and page headers:

---
title: My First Blog Post
description: A brief description of your post
date: 2025-06-24
image: /path/to/optional/featured-image.jpg
---

Your blog post content goes here...

The frontmatter fields explained:

• title: The post's title
• description: A brief summary
• date: Publication date in YYYY-MM-DD format (used for sorting)
• image: Featured image path (relative to site root) or URL

Step 3: Create the Blog Landing Page

The landing page serves as the main entry point for your blog section. You can create it using either README.md or index.md in your blog directory.

1. Inside your blog directory, create the landing page file:

   • Option 1: README.md (recommended)
   • Option 2: index.md

2. Add the following content to create a landing page that lists all blog posts:

---
title: Blog
description: A collection of blog posts
---

<List dir="/blog" fields={["title", "description", "date", "image"]}/>

The List component will automatically display all markdown files in the directory specified in dir property (in our case it's /blog). The fields prop specifies which frontmatter fields to display for each post:

• title: The post's title
• description: The post's description
• date: Publication date
• image: Featured image

The List component will:

• Sort posts by date (newest first) if available, otherwise by title
• Paginate posts (10 per page by default)
• Include files from subdirectories (useful for organizing posts by year/month)
• Ignore README.md and index.md files

Step 4: Set Up Author Pages

Author pages allow you to create dedicated profiles for your content creators and attribute blog posts to their authors. While this guide uses a /team directory in the root folder, you can store author profiles anywhere in your site's structure. (What matters is that file names need to match authors listed in the authors frontmatter field, as described below.)

To attribute blog posts to authors:

1. Add an authors field to your blog post frontmatter with an array of author names that exactly match their profile page filenames (without the .md extension):

---
title: My First Blog Post
description: A brief description of your post
date: 2025-06-24
authors:
  - jane-smith
---

1. Choose a location for author profiles. For example: /team, /authors or /people.

2. Create profile pages for your authors. For example, if using the team directory:

   team/
   ├── jane-smith.md
   └── README.md  # Optional index page listing all authors
   

3. Create an author profile, e.g., team/jane-smith.md:

---
title: Jane Elizabeth Smith
description: Technical writer and open-source enthusiast
avatar: /assets/jane-avatar.jpg
---

Jane is a passionate technical writer with over 5 years of experience...

The author pages support:

• title: Author's full name (displayed in page headers)
• description: Brief bio or role
• avatar: Profile picture displayed in page headers (local path or external URL)

When an author page exists, the author's name in blog posts will automatically link to their profile page and display its content.

Step 5: Add Blog to Navigation

1. Open or create config.json in your site's root directory
2. Add a blog link to the navigation:

{
  "nav": {
    "links": [
      {
        "href": "/blog",
        "name": "Blog"
      }
    ]
  }
}

Step 6: Control What Gets Published

You can control which blog posts get published using either site-wide settings or page-level control:

Using site-wide settings

Add contentExclude to your config.json to exclude entire directories:

{
  "contentExclude": [
    "/blog/drafts",
    "/blog/archive"
  ]
}

Using page-level control

Add publish: false to a post's frontmatter to prevent it from being published:

---
title: Draft Post
description: Work in progress
publish: false
---

This is useful for:

• Keeping draft posts private
• Archiving old content
• Managing work-in-progress posts