Hexoのプラグインの作成手順

ブログのHexoでAmazonへのリンクを気軽に作りたくて「gitbook-plugin-amazon-jp-link」を作ってnpmで公開しました。

ということで今回はhexoのプラグインの作成手順を簡単にまとめておきます。


🗽 Hexo pluginについて

Hexo」はJavaScript製のブログエンジンです。最近このブログもhexoに乗り換えました。
ブログをhexoに乗り換えた理由はpluginをJSで作れるのでJSの勉強にちょうどよいと思ったからです。

🐯 pluginの開発の流れ

まず、プロジェクトのフォルダを作成します。

mkdir hexo-<プラグイン名> && cd hexo-<プラグイン名>

次にnpm moduleの設定を行います。

npm init

次にentry pointになるindex.jsを作成します。

hexo.extend.tag.register('custom_tag', function(args){
var message = args[0];
return `<div>custom_tag: ${message}</div>`;
});

作成したpluginをローカルでテストするために「npm link の手順 / morizyun GitBook」を実行してください。

package.jsonに以下を追加してください。(0.0.1は適切なバージョンに書き換えてください)

"dependencies": {
"hexo-<プラグイン名>": "^0.0.1",
}

これでローカルのnpmライブラリが紐付けられた状態になります。

hexo server上でさきほどのタグを使えることを試してみます。
hexoのテンプレートの中に{% custom_tag hoge %}と書いてください。(%は半角に変更してください)
<div>hoge</div>が表示されれば成功です。

🚜 npmへのpush

npmでpublishするのは次のコマンドです。

npm publish

Hexoのプラグインを作るのはちょうどよいJavaScriptの勉強の題材になりそうです。

Happy Hacking!

👽 参考リンク

📚 おすすめの書籍