Benjamin Lannon

Select a theme. Click on the overlay or the button again to exit

Automating blogpost creation with Plop

Whenever I come in to create a new post here, theres some of a schema of default fields and things I need for each post, I decided to automate this using the Plop JS library.

Plop is built where you can setup a prompt using Inquirer.js and generate files / folders based on the inputs.

To start out, install Plop as a devDependency

yarn add --dev plop

For my workflow, I want it to create a new markdown file in my content/blog directory with some frontmatter automatically filled in. The plopfile.js file is where this is defined:

module.exports = function (plop) {
const { format } = require("date-fns");

let date = format(new Date(), "yyyy-MM-dd");

plop.setGenerator("post", {
description: "New Post",
prompts: [
{
name: "title",
type: "input",
message: "Post Name:",
},
{
name: "slug",
type: "input",
message: "Post Slug:",
},
{
name: "desc",
type: "input",
message: "Post Description:",
},
{
name: "date",
type: "input",
default: `${date}`,
},
],
actions: (data) => [
{
type: "add",
path: "content/blog//index.md",
templateFile: "plop-templates/post.md",
},
],
});
};

The prompts field defines a list of things to be inputted from the user. then in the actions field, I have a single entry with the type add which will create a markdown file that will be parsed with Handlebars to insert the various fields into the generated post:

---
title: "Automating blogpost creation with Plop"
date: "2020-05-09"
description: ""

---

Then I can add a new script to my package.json file to run this generator.

{
"scripts": {
"post": "plop post"
}
}

and then when I now run npm run post or yarn post, I can quickly scaffold out a new post.