Creating markdown files for a Gatsby blog with Hygen

My Gatsby blog uses markdown for content, these are inside of the content folder, and thought I could make life a bit easier by using Hygen to generate the directories and the basic markdown file by running a command.

Introducing Hygen

Hygen is a code generator that is activated in the command line, and configured within a text editor.

Hygen can be used by installing it globally:

npm i -g hygen

From there we can initialise it, and create our own generator named "post"

hygen init self
hygen generator new post

What we need

I need a way of creating these markdown files from a template, currently these files contain a bit of metadata, and the actual blog post content itself.

---
title: This is the title of the blog post
date: "2020-01-01T00:00:00.000Z"
description: "This is a description of the blog post"
---
This is where the blog post body goes.

Modifying the template

Since Hygen is template based, we can edit the newly created _templates/post/new/hello.ejs.t. The name doesn't actually matter, since we will be renaming it later on anyway, so feel free to change it if you wish.

However, the contents of the file needs a bit of changing, start by deleting everything in the body, as we want the post body to be blank.

The to option needs to be changed to where we want the file to be, in this case in a directory in content/blog/. Hygen allows us to pass through properties through the command line, in this case, I'll use name as the property.

to: content/blog/<%= name %>/index.md

However, we need it to be written as a slug. In order for us to do that, we need to create a helper. We can do this by creating a .hygen.js file in the root of our project.

Once created add the following.

// Created by GitHub user codeguy
// https://gist.github.com/codeguy/6684588
function string_to_slug(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
  var to = "aaaaeeeeiiiioooouuuunc------";
  for (var i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
}

module.exports = {
  helpers: {
    slugify: s => string_to_slug(s),
    date: () => new Date().toISOString()
  }
}

This code contains a function from a GitHub gist which simply put, slugifys a string.

I've also added a date helper, as we use it later.

Now we can go back and modify our hello.ejs.t file.

---
to: content/blog/<%= h.slugify(name) %>/index.md
---

Now, run:

hygen post new "Test Post"

And notice a new slugified folder has been created inside of content/blog! This is a great start, but we haven't finished just yet, we want to add in the post metadata.

---
to: content/blog/<%= h.slugify(name) %>/index.md
---
---
title: <%= name %>
date: "<%= h.date() %>"
description: ""
---

title will use the name that we provided.

date is the new helper also added.

description is blank.

Now when you run:

hygen post new "Test Post"

You should now see an index.md file created inside of content/blog/test-post/ that looks something like this!

---
title: Test Post
date: "2020-01-12T20:23:40.378Z"
description: ""
---

Read more

• https://www.brianhan.co/generate-blog-posts-gatsby-hygen
• https://eunjae.dev/gatsby-hygen