ikuma-t.

検索

scaffdogでブログのテンプレートを作成できるようにした

に公開

ブログの執筆コストを下げたい

ブログを書くハードルを下げたかったので、scaffdog でフロントマターまで入力した状態で作成できるようにしました。

このブログはリポジトリ内に蓄えたマークダウンファイルを変換して表示しており、メタデータは各ファイルの YAML フロントマターで定義されています。こんな感じですね。

---
title: "個人サイトをAstroで作り替えました。"
description: "もともと Next.js で個人サイトというかブログを作って運用していたのですが、これを Astro に置き換えました。理由としては巷でよく言われているところで、個人ブログ程度には Next.js は too much だったからです。..."
publishDate: 2023-01-03
layout: "@layouts/BlogLayout.astro"
tags: [astro]
---

で、こういうのは入力が面倒なので、前作のブログではどこからでもブログが作成できるように Deno を使ったオレオレブログ CLI を作成していたのですが、GitHub Codespaces 上で作業を行うことで作業ディレクトリの縛りがなくなったため、今回は scaffdog でやってみました。

scaffdog の導入

Terminal window
# インストール
npm install scaffdog
# 初期化(ここではpostという名前でテンプレートを作った)
npx scaffdog init

作成されたテンプレートに次のように記載しました。

---
name: "post"
root: "."
output: "src/pages/blog"
ignore: ["."]
questions:
fileName: "ファイル名"
title: "タイトル"
tags: "タグ(カンマ区切りで複数指定)"
---
# `{{ inputs.fileName }}.md`
```markdown
---
title: "{{ inputs.title }}"
description: ""
publishDate: "{{ date('YYYY-MM-DDTHH:mm:ss') }}"
inputs.category }}"
layout: "@layouts/BlogLayout.astro"
tags: [{ { inputs.tags } }]
drafts: true
---
## TOC
```

入れ子になっているのでわかりにくいですが、markdownのコードブロックで囲まれている部分が自動生成対象です。

ほとんどの項目はフロントマターで定義した質問の回答(inputs.xxx)をそのまま埋め込んでいますが、日付だけはビルトインのdate関数で現在日付を設定しています。

あとは npm scripts として次のようなコマンドを入れてあげれば準備 OK です。

"scripts": {
"gen": "scaffdog generate post"
}

動作イメージ

Terminal window
$ npx gen
Output destination directory: "src/pages/blog"
? ファイル名 create-blog-template
? タイトル scaffdogでブログのテンプレートを作成できるようにした
? カテゴリ ブログ
? タグ(カンマ区切りで複数指定) scaffdog,blog
🐶 Generated 1 file!
src/pages/blog/create-blog-template.md
Done in 39.86s.

そんで出来上がったのが、この記事というわけです ✌️

ikuma-t

ikuma-t

ABOUT

9割笑顔、1割 (´・ω・) なエンジニア