Create Post on Gatsby with hygen


These days I’ve been trying and enjoying Gatsby. It provides many starters and this page is created by gatsby-starter-blog. Using it, to create a new blog post, I need to create a file such as ./content/blog/hello-world/ and its content would be

title: Hello World
date: '2015-05-01T22:12:03.284Z'
This is my first post on my new fake blog! How exciting!

This sounds simple enough, but I wanted to make it simpler with hygen.

Here are the steps.

npx hygen init self
npx hygen generator new --name blog

_templates/blog/new/hello.ejs.twill be added. The name doesn’t matter, so let’s change:

mv _templates/blog/new/hello.ejs.t _templates/blog/new/index.ejs.t

Edit index.ejs.t like the following:

to: content/blog/test-post/
This is a test post.

Let’s try run:

npx hygen blog new

It will generate a file at content/blog/test-post/ and its content will be This is a test post.. Now you’ll see how it works.

Let’s add a prompt so that it will ask you the title of a new post and you will also slugify it for url.

Add _templates/blog/new/index.jslike the following:

const slugify = require('slugify')  
module.exports = {  
  prompt: ({ prompter }) => {  
    return new Promise((resolve, reject) => {  
          type: 'input',  
          name: 'title',  
          message: 'What is the title?',  
        .then(({ title }) => {  
            date: new Date().toISOString(),  
            slug: slugify(title, { remove: /[*+~.()'"!:@]/g, lower: true }),  

Edit _templates/blog/new/index.ejs.tlike the following:

to: content/blog/<%= slug %>/
title: '<%= title %>'  
date: '<%= date %>'

Okay, let’s add slugify to your devDependencies:

yarn add slugify -D

And run it:

npx hygen blog new

It will ask you the title:

? What is the title? › The First Blog Post

It will generate content/blog/the-first-blog-post/ and its content will be:

title: 'The First Blog Post'  
date: '2019-01-01T08:50:08.194Z'

Okay, let’s put a script into package.json.

"scripts": {
  "g": "hygen blog new",

And add hygen to devDependencies:

yarn add hygen -D

Okay, you’re good to go.

yarn g

Read More