osgsm.io
HomeBlogテンプレートに沿ったマークダウンファイルをコマンドから簡単に作成できるようにする

テンプレートに沿ったマークダウンファイルをコマンドから簡単に作成できるようにする

Published Dec 17, 2024
⋅
Updated Jan 13, 2025

前回の投稿に書いたように、このブログは Sylph というスターターを使って作成しています。 Sylph では、 .mdx ファイルを使って投稿を作成し、次のようにフロントマターにタイトルや日付を記述します。

---
title: "新たに投稿を作成する npm スクリプトを追加する"
time:
  created: "2024-12-17T04:50:49.566Z"
  updated: "2024-12-17T04:50:49.566Z"
---

このように決まったテンプレートが必要な場合、手動でファイルを作成するのは面倒です。

なので、 npm スクリプトを追加し、コマンドで簡単に新規投稿を作成できるようにします。

スクリプト用のファイルを作成する

例えば、 /scripts/create-post.js というファイルを作成します。

create-post.js のコードは次のようになります。 ちなみにこのコードはほとんど AI に作成してもらいました。

create-post.js
const fs = require("node:fs");
const path = require("node:path");
const { exec } = require("node:child_process");
 
// Main function
async function createPost() {
  try {
    const filename = process.argv[2];
    if (!filename) {
      throw new Error(
        "Please specify a filename.\nExample: npm run create-post my-new-post",
      );
    }
 
    const timestamp = new Date().toISOString();
    const template = `---
title: ""
time:
  created: "${timestamp}"
  updated: "${timestamp}"
---
 
## Article content goes here
 
`;
 
    const postsDir = path.join(
      process.cwd(),
      "app",
      "(posts)",
      "blog",
      "posts",
    );
    const filepath = path.join(postsDir, `${filename}.mdx`);
 
    // Check if file already exists
    if (fs.existsSync(filepath)) {
      throw new Error(`${filename}.mdx already exists.`);
    }
 
    fs.writeFileSync(filepath, template, "utf-8");
    console.log(`✅ Created ${filepath}`);
 
    // Open file in Cursor
    exec(`cursor "${filepath}"`, (error) => {
      if (error) {
        console.warn("⚠️ Could not open Cursor automatically:", error.message);
      }
    });
  } catch (error) {
    console.error("❌ Error:", error.message);
    process.exit(1);
  }
}
 
createPost();

上のコードはこのブログの構造に沿った内容になっていますが、 template の内容や postDir のパスを変更すれば他のプロジェクトでも使えるかと思います。

あと、ファイル作成後に Cursor で開くようにしていますが、その部分も適宜変更してください。

package.json への追加

npm script として使えるように、 mdx:create というスクリプトを package.json に追加します。

package.json
{
  // ...
  "scripts": {
    // ...
    "mdx:create": "node ./scripts/create-post",
    "lint:style": "npx stylelint \"**/*.css\" --fix",
    "lint:biome": "npx biome check --fix --unsafe .",
    "lint:prettier": "npx prettier . --write --log-level warn",
    "lint": "npm run lint:style && npm run lint:prettier && npm run lint:biome"
  },
  // ...
  }
}

実際に使ってみる

次のコマンドを実行します。引数としてファイル名を渡します。

Terminal
pnpm mdx:create sample-post

ファイルが作成されると次のように出力されます。

✅ Created /Users/username/myproject/app/(posts)/blog/posts/sample-post.mdx

そして、Cursor で作成したファイルが開きます。

作成されたファイルの内容は次のようになっています。

sample-post.mdx
---
title: ""
time:
  created: "2024-12-17T05:02:13.439Z"
  updated: "2024-12-17T05:02:13.439Z"
---
 
## Article content goes here

素晴らしい✨

スクリプトの概要

スクリプトの概要は次のようになっています。

  • process.argv[2] でコマンドライン引数を取得しファイル名にする
  • ファイル名を指定していない場合はエラーを出す
  • new Date().toISOString() で現在時刻を ISO 形式で取得し、テンプレートに追加
  • path.join() を使って filepath を用意
  • fs.existsSync() で同じファイルが既に存在する場合はエラーを出す
  • fs.writeFileSync() でファイルを作成
  • exec() を使って Cursor でファイルを開く

これで簡単に投稿を作成できるようになりました。

今回のような簡単なスクリプトであれば、一瞬で AI に作成してもらえるのでいい時代になりましたね。

余談ですが、この投稿は Cursor を使って作成しています。記事の内容もわりといい感じにサジェストされるので、投稿の作成がはかどりそうな予感です。

参考

PreviousSylph を使ってサイトをリニューアルした