Write a draft script for your SSG blog
Hey there! This article is being published a "work in progress," which means that it is not done. So take everything with a grain of salt.
I may or may not come back and finish this article. Regardless, I hope that it's helpful in its current state.
This site is powered by Eleventy, a simple static-site generator. All of the pages and articles exists as markdown files that are converted into HTML files via Nunjuck templates at build time.
For a blogging platform, it’s pretty neat. I enjoy being able to run the whole site from the comfort of my text editor and the command line (with a little help from Netlify for continual deployments).
The secret sauce behind markdown-based sites is the frontmatter: specially formatted content at the top of a markdown file that is read by the generator. Here’s what the frontmatter for a typical article looks like:
title: Add event listener for class change
description: How to create a custom event listener for class names using the MutationObserver API
<!-- Start writing your article here -->
When I want to write a new article, I need to make sure I have all of those fields populated in a particular way in order for Eleventy to generate the page correctly.
Formatting and required fields are not something that I care to remember, so I wanted to develop an easier method for generating a draft for this blog. This is my journey.
Most static-site generators will have a directory for you to store some files that are excluded from the build process. For Eleventy, that default directory is
_includes/. I added a subdirectory for
templates/ and added an
article.md. All it contains is the bare-bones frontmatter for a new article:
I hard coded the date because I have a hard time remembering the YYYY-MM-DD format. It would be cool for the script to generate that for me.
Solution 1: Bash script #
Now that I have a template to reference, all I really need to do is write a simple script to copy that file to the
articles/ directory. I added the following code to a
create-draft.sh file in the root directory:
if [ "$1" ]
cp "_includes/templates/article.md" "articles/_$title.md"
This script declares a variable
title and sets the value to the string
"draft". Then it checks to see if another argument is passed. If so, then it reassigns
title to that value.
Then it copies the article template to the
articles/ directory with the filename title.
Note: I am prepending an underscore to the name of the file because I have configured Eleventy to ignore markdown files that begin with an underscore from the build. The solution got Eleventy’s stamp of approval.
I added a
draft script to packages.json:
"draft": "sh create-draft.sh"
Once that was in place, I could call my script by running:
npm run draft my-new-article
This worked, but it was pretty simple. I needed to remember to use kebab case for the title of the article so that the file name would work. It didn’t add the title to the copied file, nor set a date.
It served me well for a while, but eventually time came for a change.
Solution 2: node.js script #