hugo

「hugo」タグの付いた 1 件の投稿

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

2024/03/11 - 読了時間 3 分 - 500 語

Inori

必要条件

• 基本知識：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つのパッケージをインストールする必要があります：

1. @Inquirer/Prompts：ターミナルでユーザーフレンドリーなインターフェースを作成するために使用されます。
2. 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つの質問といくつかのアクションがあります：

1. アーキタイプを選択します
2. 記事タイトルを入力します
3. ディレクトリを選択します
4. 作成を確認します
5. スクリプトを実行します
6. 最後に、作成したファイルを開きます

作成されたスクリプトを終えたら、スクリプトを package.jsonに追加してください。

package.json

"scripts": {
  "create": "node createPost.js"
}

その後、npm run create を実行します。以下は実行結果です：

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

タグ:

• npm
• hugo
• JavaScript