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

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

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


Hexo pluginについて

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

pluginの開発の流れ

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

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

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

1
npm init

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

1
2
3
4
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は適切なバージョンに書き換えてください)

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

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

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

npmへのpush

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

1
npm publish

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

Happy Hacking!

参考リンク