inorisense | ブログ

[MCV] Taccia Hokusai Sabimidori (Rusty Turquoise) Ink

Mon, 30 Jun 2025 00:00:00 GMT

[MCV] Intro to My Calligraphy Voyage

Tue, 10 Jun 2025 00:00:00 GMT

[MCV] My Equipment for Calligraphy

Tue, 10 Jun 2025 00:00:00 GMT

Type Safety and Runtime Safety Part.1/2: model, validator & data

Sun, 17 Mar 2024 00:00:00 GMT

Type Safety and Runtime Safety Part.2/2: page, route guard & API

Sun, 17 Mar 2024 00:00:00 GMT

NPM スクリプトで Hugo 記事を作成する方法

Mon, 11 Mar 2024 00:00:00 GMT

必要条件

基本知識：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 を実行します。以下は実行結果です：

以上です！ハッピーコーディング

[Note] Implementation of State Machine and Multi-step Form

Sun, 01 Oct 2023 00:00:00 GMT

漢語拼音輸入法介紹與實用技巧

Thu, 03 Aug 2023 00:00:00 GMT

[開箱] 無印良品隨身風扇

Wed, 22 Mar 2023 00:00:00 GMT

[Hugo] GitHub Actions で Hugo ブログを Vercel へデプロイする方法

Sun, 01 Jan 2023 00:00:00 GMT

[Review] Boox Poke 4 Lite eReader: Dilemma Between Open & Closed

Thu, 29 Dec 2022 00:00:00 GMT

牙醫與臭豆腐

Fri, 11 Nov 2022 00:00:00 GMT

[CSS] Switching theme in Tailwind

Fri, 14 Oct 2022 00:00:00 GMT

The First Dive in Multi-Threaded Patterns

Tue, 27 Sep 2022 00:00:00 GMT

GitFlow & Blog Version Control

Mon, 05 Sep 2022 00:00:00 GMT

鴨川的各種風貌

Wed, 31 Aug 2022 00:00:00 GMT

E2E Testing Oriented Developing Process

Sat, 27 Aug 2022 00:00:00 GMT

機動性與獨立傢俱

Sun, 21 Aug 2022 00:00:00 GMT

學習摩斯電碼

Sat, 23 Jul 2022 00:00:00 GMT

行動裝置上 100vh 的奇怪行爲

Sun, 17 Jul 2022 00:00:00 GMT