Creating posts with ZippyStarter

I wanted the authoring experience with ZippyStarter to be frictionless, so I included a CLI which prompts for information, creates a category, and the necessary files, unless the category already exists. Otherwise it's a manual process.

How to create a post

The easiest way to create a post is to run the following script:

pnpm run post

You'll then be prompted for some optional and mandatory information.

Meta data

mandatory

What is the post title?

Titles are used to generate slugs for pages (also the name of the file), to populate <h1> tags, and <title> meta tags;

mandatory

What is the post description?

Descriptions are used to generate snippets, such as the opening text in a blog post, and the <meta description=""> tag.

Featured image

You can add images stored in the /public/ directory, or from remote sources like unsplash. There default image size for blog posts is configured in config.json, these values are used to ensure images are sized appropriately.

optional

Featured image URL

Featured image urls are used in the blog post header, blog feed cards, and open graph data such as twitter cards, these images appear when you share content on social media.

If you add a url then you'll be prompted for more information about the image:

Featured image alt text

Alt text is used to describe images to users that use assistive devices such as screen-readers.

Post category

mandatory

Select a parent category or create a new one

If categories already exist you'll be able to choose one to add to, or alternatively you can create a new category.

Enter the new category name

Type the name of the category you want and a new directory will be created for the post.

The generated output

---
title: "Creating posts with ZippyStarter"
date: 2023-11-15
description: "I want the authoring experience with ZippyStarter to be easy. To achieve this I started by introducing a CLI which prompts you for information, creates a category, an index file, and the new post, unless the category already exists."
featured_image:
  url: https://images.unsplash.com/photo-1531256379416-9f000e90aacc
  alt: "Writing materials"
  width: 1232
  height: 620
 
author:
  name: Morgan Feeney
  avatar: /authors/morgan.webp
---

You'll see some extra fields that you didn't have to add, they're automatically added to the MDX file via config.json, except the date which is generated by getting the date at the time of creation.

Once this has been created, you can edit the file.

Use of the CLI is optional, but I highly recommend it.