必要条件
- 基本知識：NPM、Hugo、JavaScript、シェルスクリプト
- プリインストール：VSCode、NPM CLI、Hugo CLI
序文
Hugo CLI を使用して記事を作成することは、わたしにとって煩雑な作業です。なぜなら、わたしは常にアーキタイプを使用して記事を作成し、それをネストされたフォルダに配置するからです。例えば、この記事を作成する際には、ターミナルで以下のコマンドを入力します：
hugo new --kind develop posts/_developer/create-hugo-post-with-npm-script
こっちの問題は、アーキタイプの種類とプロジェクトのフォルダー構造が、今どのように見えるかを忘れやすいです。フォルダー構造は非常に頻繁に調整するからです。さらに、VSCodeのサイドメニューにあるエクスプローラーはNPM スクリプト機能を提供し、本当に気に入っています：
この機能は、個人的にクリックでスクリプトの実行を読んで機能は、ユーザーがスクリプトを忘れても実行できる機能なので、とても便利です。しかし、わたしの知る限り、ノード・パッケージ・マネージャー、通称 NPM だけをサポートしているようです。Hugo ブログでは NPM やノードパッケージを使われる場合は全くありませんけれども、「クリックでスクリプトの実行」機能を Hugo CLI と組み合わせて使用するには、NPM をミドルウェアとして使用する必要があります。それでは、ここから始めましょう。
Hugo Dev サーバーのスクリプトの構築
まず、npm init を使用して NPM を初期化してください。
次に、このスクリプトを package.json に追加した後、Hugo 開発サーバーを NPM で実行してみましょう。
// package.json
"scripts": {
"dev": "hugo serve -D",
}
ターミナルに npm run dev と入力してください。または、サイドバーでスクリプトをクリックして実行してください。
よくできました！✨
ポスト作成のスクリプトの構築
それでは、NPM スクリプトが完璧に Hugo CLI を呼び出します。次に、最終目標に目指しましょう：記事を作成します。
まず、次の2つのパッケージをインストールする必要があります：
- @Inquirer/Prompts：ターミナルでユーザーフレンドリーなインターフェースを作成するために使用されます。
- Inquirer-Directory：ディレクトリを簡単に選択できます。
次に、ルートディレクトリに JavaScript ファイル createPost.js を作成し、記事作成の進行を構築します。参照のコードは次のとおりです：
"use strict";
const inquirer = require("inquirer");
const { input, select, Separator, confirm } = require("@inquirer/prompts");
const { execSync } = require("child_process");
const inquirerDirectory = require("inquirer-directory");
const BASE_PATH = "./content";
inquirer.registerPrompt("directory", inquirerDirectory);
const exec = (commands) => {
execSync(commands, { stdio: "inherit", shell: true });
};
/**
* Create post script
*
* @see https://github.com/SBoudrias/Inquirer.js
* @see https://github.com/nicksrandall/inquirer-directory
*/
(async function () {
const archeType = await select({
message: "Select a archetype",
choices: [
{
name: "Basic",
value: "basic",
description: "Basic post",
},
{
name: "Dev",
value: "dev",
description: "Post for developer.",
},
new Separator(),
{
name: "Garden",
value: "garden",
description: "Note for digital garden.",
},
],
});
const title = await input({ message: "Enter your post title" });
const directory = await inquirer.prompt({
type: "directory",
name: "path",
message: "Please choose post directory.",
basePath: BASE_PATH,
});
const answer = await confirm({ message: "Confirm create the post?", default: false });
if (answer) {
exec(`hugo new --kind ${archeType} ${directory.path}/${title}`);
exec(`open ${BASE_PATH}/${directory.path}/${title}/index.md`);
}
})();
スクリプトの流れは、3つの質問といくつかのアクションがあります：
- アーキタイプを選択します
- 記事タイトルを入力します
- ディレクトリを選択します
- 作成を確認します
- スクリプトを実行します
- 最後に、作成したファイルを開きます
作成されたスクリプトを終えたら、スクリプトを package.jsonに追加してください。
// package.json
"scripts": {
"create": "node createPost.js"
}
その後、npm run create を実行します。以下は実行結果です：
以上です！ハッピーコーディング