ブログ

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

#scaffdog#blog

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

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

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

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

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

scaffdog の導入

# インストール
npm install scaffdog

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

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

---
name: "post"
root: "."
output: "src/pages/blog"
ignore: ["."]
questions:
  fileName: "ファイル名"
  title: "タイトル"
  category: "カテゴリ"
  tags: "タグ(カンマ区切りで複数指定)"
---

# `{{ inputs.fileName }}.md`

```markdown
---
title: "{{ inputs.title }}"
description: ""
pubDate: "{{ date('YYYY-MM-DDTHH:mm:ss') }}"
category: "{{ inputs.category }}"
layout: "@layouts/BlogLayout.astro"
tags: [{ { inputs.tags } }]
drafts: true
---

## TOC
```

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

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

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

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

動作イメージ

$ 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.

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


Buy Me A Coffeeikuma-tにお恵みを!