コンテンツにスキップ
inorisense
私について デジタルガーデン
ブログ

Inori

Inori による 43 件の投稿

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

- 読了時間 3 分 - 500 語
Inori
Inori

必要条件

Section titled “必要条件”
  • 基本知識：NPM、Hugo、JavaScript、シェルスクリプト
  • プリインストール：VSCode、NPM CLI、Hugo CLI

序文

Section titled “序文”

Hugo CLI を使用して記事を作成することは、わたしにとって煩雑な作業です。なぜなら、わたしは常にアーキタイプを使用して記事を作成し、それをネストされたフォルダに配置するからです。例えば、この記事を作成する際には、ターミナルで以下のコマンドを入力します：

Terminal window
hugo new --kind develop posts/_developer/create-hugo-post-with-npm-script

こっちの問題は、アーキタイプの種類とプロジェクトのフォルダー構造が、今どのように見えるかを忘れやすいです。フォルダー構造は非常に頻繁に調整するからです。さらに、VSCodeのサイドメニューにあるエクスプローラーはNPM　スクリプト機能を提供し、本当に気に入っています：

npm script in side menu

この機能は、個人的にクリックでスクリプトの実行を読んで機能は、ユーザーがスクリプトを忘れても実行できる機能なので、とても便利です。しかし、わたしの知る限り、ノード・パッケージ・マネージャー、通称 NPM だけをサポートしているようです。Hugo ブログでは NPM やノードパッケージを使われる場合は全くありませんけれども、「クリックでスクリプトの実行」機能を Hugo CLI と組み合わせて使用するには、NPM をミドルウェアとして使用する必要があります。それでは、ここから始めましょう。

Hugo Dev サーバーのスクリプトの構築

Section titled “Hugo Dev サーバーのスクリプトの構築”

まず、npm init を使用して NPM を初期化してください。

次に、このスクリプトを package.json に追加した後、Hugo 開発サーバーを NPM で実行してみましょう。

package.json
"scripts": {
  "dev": "hugo serve -D",
}

ターミナルに npm run dev と入力してください。または、サイドバーでスクリプトをクリックして実行してください。

npm run dev

よくできました！✨

ポスト作成のスクリプトの構築

Section titled “ポスト作成のスクリプトの構築”

それでは、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 run create

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

レイバー・デーのリラックス提案

- 読了時間 5 分 - 1100 語
Inori
Inori

レイバー・デーの時、あるプランをやってみたいのです

昨年、ちょっと事情があって、忘れちゃいました

ですから、今年はどうしても逃せません

プランだと言っても、決して偉いもんじゃありません

経緯

Section titled “経緯”

労働者たちは、この日に 1 日休みになることです

それはレイバー・デーです

自分の体にとって、私たちは取締役として、自分の体にゆっくり 1 日休ませてあげませんか

さすがに、僕たちは週末に遊びにいく時、体が休んでないと決まっていますね

ですから、「この日こそ、一日休もう」という発想が生み出した

具体的に、どうすればいいですか？

やり方

Section titled “やり方”

やり方すごく簡単で、これから説明します

やること

Section titled “やること”

5 月 1 日に、できることはただ三つ：

  1. 食べる
  2. 読む
  3. 寝る

それだけ。

一日中食べなくてもいいんですが、断食などやったことありません

だからごめんね、胃腸さん、また働いてもらってもいいですか

食べすぎないように注意します

休みと言っても、ぼんやりするばかりじゃさすがに無理のでしょうね

ですから、本読みを追加しました、ただし、紙の本に限ります

電子ブックをやめましょう

でもまあ、Kindle みたい電子書籍リーダーならいけるのでしょう

もし目も休んだら、多分寝るしかありませんね、悪いね、目さん

寝るといえば、少し疲れたら寝ていくことなんて、どれほど贅沢なことでしょうか 🙃

体の機能に維持するのため、脳さん、心臓さん、肺臓さんも多分休めません

すみません、みんな、できる限りに休もうと思います

できないこと

Section titled “できないこと”
  • 電子端末、液晶モニターなど
  • 運動
  • 外出

ブルーライトをカットするために、すべての電子端末もしまいましょう

ですので、毎日使ってる MacBook をしばらく収まりしょう

スマホなら、連絡と軽音楽を聞くのため、最低の程度で使わせてもらいます

「なぜ運動だめですか？」と聞くかもしれませんが

特に理由がありません

ただゆっくり休むと決めた以上、省エネモードにしようと思います

ショッピングやカフェ屋さんでコーヒーを飲むなど外出ことが、結構エネルギーをたっぷり費やすので、ごめんです

ただ、食事で外出なら許されます

うん、ルールはほぼこれ以上です

そろそろはじめましょう

過程

Section titled “過程”

早朝に、のんびり牛ハンバーグのチーズサンドを味わいました

朝食店は休まず営業をするのに感謝します

それから、本を読もうと思います

今日読むのは、図書館で借りった東野圭吾の「ナミヤの雑貨店の奇蹟」です

この小説、ずっと読んでみたったのです

5 月に入ったが、また涼しい日なんって、なんか助かりました

外で雨が降っていて、雨音が響いています

雨音はさすがに癒やしものなあー、すごくに落ち着くのっとぼんやりと考えています

活字に追いかけて、僕は小説の世界に飛び込みました

不思議なところが、やることが少なくなって、時間がおそく流れるような気がします

ナミヤの雑貨店のように、不思議に感じました

たまに立って歩き回りながら、今日のプランを思い返して

うん、なんかほかにやることはないみたいって思っていました

はっと気付きました

僕はいつも空いている時間が逃さず、使わなければならないのです

プログラミングの勉強、本読み、運動など、いつでもやりたいことが山ほどあります

それに、もしスマホ、タブレット、コンピュータ、テレビ、ネットワークなどを取り除くなら、

僕たちの生活になにをまた残っているのでしょうか？

つい思い返してみました

あのスマホやコンピュータがない、ネットワークが流行っていない時代で、一体どう過ごすのでしょう

毎日同じの 24 時間、どんなことをするのでしょうか

ですが、どう考えても思い出せませんでした

それで、また小説の中に戻りました

疲れたら、ベットで倒れ休みます

たっぷり休んでから、本読みが続きます

いつの間に、晩御飯の時間をやってきました

ラーメンを食べ、この 1 日を済ませようっとこっそり決めました

窓から、また雨音が続いています、やはり贅沢な天気と思います

電車を乗って、近くにあるラーメン屋さんに向かいます

運転手さんと駅員さんたちに感謝します、でなきゃ僕は歩くしかありません

ラーメン屋さんに行く途中で、少し心配しました、もし休んだらどうすればいいでしょう

でも、近くに見ると、ラーメン屋さんの窓から、かすかな電球の光が漏れています

「いらっしゃいませー」っと、お店はお客さんに呼んでるように

ラーメン屋の店員たちは今日も一生懸命働くからこそ、うまいラーメンが食べられることになります

こころで合掌

さすがにごちそうさまでした

帰り道に、雨がやむことはなさそうです

小説を終わらせよう

後書き

Section titled “後書き”

以上は「何もやらないレイバー・デーの一日」です

文字通りに何もやらないわけじゃないけど、すみません（笑

僕は真面目に毎日を過ごして、結局休むそのものを忘れちゃいました

体も精神も本当に休んでないと実感して、一日中に検討していました

健康は何よりも一番大切なことで

皆さんはどうでしょうか

ゆっくり休んでいるのでしょうか

それに仕事中毒なのでしょうか 😂