TPB

Hexoで使ってるプラグインを晒してみたいと思います。

Hexoブログを始めてみたいという方の参考にしていただければ嬉しいです。また、こんな便利なものあるよー！とかがあったらTwitterなどで是非教えて下さい^^ 今のpackage.jsonは下記のような感じです。使ってるnode.jsはv4.3とhexo v3.1です。

photo by Mr. Alex Garcia - Double Cliche on flickr

Ads

目次

package.json

まずは今使っているプラグインを晒してみたいと思います。

package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.1.0"
  },
  "dependencies": {
    "hexo": "3.1.0",
    "hexo-clean-css": "0.0.2",
    "hexo-deployer-git": "^0.2.0",
    "hexo-front-matter-excerpt": "^0.2.0",
    "hexo-fs": "^0.1.6",
    "hexo-generator-amp": "git+https://github.com/tea3/hexo-generator-amp.git",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "git+https://github.com/tea3/hexo-generator-feed.git",
    "hexo-generator-index": "git+https://github.com/tea3/hexo-generator-index.git",
    "hexo-generator-robotstxt": "^0.2.0",
    "hexo-generator-search": "git+https://github.com/tea3/hexo-generator-search.git",
    "hexo-generator-seo-friendly-sitemap": "0.0.19",
    "hexo-generator-single-page": "git+https://git@github.com/dotimpact/hexo-generator-single-page.git",
    "hexo-generator-tag": "git+https://github.com/tea3/hexo-generator-tag.git",
    "hexo-html-minifier": "0.0.1",
    "hexo-include-markdown": "git+https://github.com/tea3/hexo-include-markdown.git",
    "hexo-related-popular-posts": "git+https://github.com/tea3/hexo-related-popular-posts.git",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.11",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-tag-codepen": "^0.2.2",
    "hexo-tag-flickr": "git+https://github.com/tea3/hexo-tag-flickr/#enable_cache_and_get_image_size",
    "hexo-tag-googlemaps": "^1.0.0",
    "hexo-tag-instagram": "^1.0.1",
    "hexo-tag-random-embed": "git+https://github.com/tea3/hexo-tag-random-embed.git",
    "hexo-tag-soundcloud": "git+https://github.com/tea3/hexo-tag-soundcloud.git",
    "hexo-tag-twentytwenty": "0.0.2",
    "hexo-tag-twitter": "^1.0.0",
    "hexo-toc": "git+https://github.com/tea3/hexo-toc.git",
    "hexo-uglify": "0.0.3",
    "js-yaml": "3.2.5",
    "minimatch": "^3.0.3",
    "mkdirp": "^0.5.1",
    "node-sass": "^3.8.0",
    "spawn-sync": "^1.0.15"
  },
  "devDependencies": {
    "async": "^2.0.1",
    "browser-sync": "^2.14.3",
    "coffee-script": "^1.9.3",
    "del": "^2.2.2",
    "glob": "^7.0.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-ejs": "^3.0.1",
    "gulp-ext-replace": "^0.3.0",
    "gulp-html-minifier": "^0.1.8",
    "gulp-imagemin": "^3.0.3",
    "gulp-include": "^2.3.1",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sass": "^2.3.2",
    "gulp-slim": "^0.3.0",
    "gulp-stylus": "^2.5.0",
    "gulp-uglify": "^2.0.0",
    "gulp-uncss": "^1.0.6",
    "iso8601": "^1.1.1",
    "nib": "^1.1.2",
    "run-sequence": "^1.2.2",
    "watch": "^0.19.2"
  }
}

npmバージョン固定と最新バージョンの選択

冒頭で前述しましたが、使っているのはHexo v3.1です。また、各プラグインは最新のものや、過去のバージョンを敢えて固定してインストールしています。

hexoプラグインに限った話ではありませんが、プラグインの仕様が大きく変わる事があるので、バージョン固定が必要と感じたものは固定しています。

npmの話になりますが、package.jsonでバージョンナンバーに^(キャレット)が無いものは、バージョンを固定してインストールしています。

逆に、^が有るものは表記されているバージョンよりも最新のものが存在すればインストールすることを許可しているという意味ですので、予めご承知ください。

独自にカスタマイズしたプラグイン

また後述しますが、package.jsonのバージョンが、git+https://github.com/〜で始まるものは既存のプラグインを独自にカスタマイズ、または新規で作成したオリジナルプラグインです。githubのリポジトリからnpmインストールしています。

gulpタスク

devDependenciesではgulpに関するパッケージが占めています。テーマをカスタマイズしていた時期があったので、アセットをテーマに流し込むためにgulpタスクを使っていました。また、ポートフォリオ・サイトをgulpとYAMLファイルから自動生成できるようにしています。

gulpについては、Hexoとは関係が薄いため当記事では割愛します。

当ブログの表示例

表示例は以下のような感じです。

自身のブログ
【一覧】markdownの記法まとめ・hexoで記事を書く方法

プラグインの解説

dependenciesを見ていくと何となく分かるかと思いますが、hexoプラグインは以下の様なものを使ってます。

更新が止まっているプラグイン

残念ながらここ数年、更新されていないプラグインも結構あります。その理由により、ユーザーによって好みにカスタマイズ(fork)されているケースも増えてきました。

痒い所に手が届くような機能が欲しい場合には、まずgithubリポジトリのforkを辿ってみる事をおすすめします。

必須プラグイン

おそらく殆どのケースで使うことになるプラグインです。こちらはブログのコンテンツを生成してくれるプラグインとなっています。

hexo-deployer-git

hexoをgithub pagesにアップロードする事ができる純正プラグイン。コマンドのhexo d -gで簡単にgithubにデプロイができます。デプロイの方法は公式ドキュメントに解説されています。

そのほか、HerokuやRsync、OpenShiftにもデプロイできるプラグインが用意されているようです。

hexo-generator-archive

ブログのアーカイブを生成する純正プラグインです。同様にして、カテゴリやインデックスページ、タグのページを生成してくれるhexo-generator-category、hexo-generator-index、hexo-generator-tagが用意されています。

SEO対策・フィード生成プラグイン

検索エンジン対策の助けとなるプラグインです。またフィードやサイトマップなどの生成を行ってくれるものも揃っています。

hexo-generator-feed

ブログのフィードを生成してくれるプラグインです。形式はatomやrss2をサポートしていて、生成数はオプションで変更できます。またGoogleに素早くインデックスさせるためのPubsubhubbubにも対応しています。

hexo-generator-robotstxt

検索エンジンのクローラー制御に使われるrobot.txtの生成ができるプラグインです。sitemapやdisallow、allowのオプション指定ができます。

hexo-generator-seo-friendly-sitemap

サイトマップを生成してくれるプラグインです。名前からしてSEOフレンドリーなので、全ておまかせです(笑)

生成系プラグイン

特殊なページやリストを自動で生成してくれる便利なプラグインです。

hexo-include-markdown

記事の元となるマークダウンファイルに、別のマークダウンを読み込ませて表示させるプラグインです。複数の記事で同じような内容を使いたいけど、更新も頻繁にあるので作業大変！といったケースでメンテナンス性を上げる効果を発揮します。

Hexoでmarkdownに外部マークダウンを読み込ませるプラグインを作った

hexo-generator-single-page

記事以外に、専用のレイアウトを使ったページを作りたい場合に便利なプラグインです。当ブログではポートフォリオのページに使っています。

text perforation
テーマテンプレートからシングルページを作るだけのHexoプラグイン

hexo-related-popular-posts

関連記事や人気の記事のリストを生成してくれるプラグインです。また、ページの閲覧数や記事のPV数を作成してくれます。

こちらは自分が作成したプラグインなのですが、Wordpressのrelated-posts系やpopular-posts系プラグインを意識して作りました。デザインのカスタマイズも自由できるのでよろしければ使ってみてください。

Hexoで関連記事や人気記事を生成するプラグインを作った

hexo-toc

目次を生成できる便利なプラグインです。markdownに＜!-- toc --＞と記述すると、その位置に目次が生成されます。目次の内容は、プラグインが記事に含まれる見出しを探して、自動でリストを作成してくれます。

最新のバージョンでは日本語の見出しでリンクが正常に生成されないので、一部仕様を変更したものをフォークして使っています。

hexo-front-matter-excerpt (不使用)

記事に対して、概要を作成できるプラグインです。テーマによっては記事本文を要約した概要を表示する事ができます。

私が使っているテーマでは、うまく機能しなかったので、markdownファイルにdescriptionという項目を用意して、概要表示させたり、SEO向けにmeta descriptionの内容として使っています。

hexo-generator-search

サイト内検索を提供してくるプラグイン。このサイトでもメニューとサイドバー(モバイルの場合はフッター)に検索ウインドウを用意しています。

検索用のテキストデータをxmlで自動生成してくれます。テキスト検索を行うので、検索結果の表示はかなり高速です。

hexo-generator-amp

google AMP (Accelerated Mobile Pages) を自動で生成してくれるプラグインです。hugoやjekyllにも似たものがありますが、こちらは1つの記事ページHTMLに対して、新たに１つのAMP HTMLを生成します。

こちらは自分が作成したプラグインです。静的サイトという利点を活かして、AMP HTMLファイル生成直後に記述の妥当性を自動チェックすることができます。妥当性を自動検証する機能は、Wordpress等では実現が難しい内容なので、Hexoならではの便利機能だと思っています。

tea
HexoからAMP HTMLを生成するプラグインを作った

画像や動画の埋め込み

外部のSNSや画像サービスの投稿を埋め込むことができるプラグインです。

hexo-tag-flickr

flickrの画像を短い記述で埋め込むことができる便利なプラグインです。難点としては、サーバーを立ち上げる度にFlickrへ画像のURLをリクエストしてしまう事です。ブログの画像数が多いとページの生成に時間が掛かります。

こちらは、独自にカスタマイズしたものを使っています。何度もリクエストしないようにキャッシュ機能を追加してみましたので、リクエスト時間が気になる方は、私のforkリポジトリを利用してみてください。

hexo-tag-instagram

instagramの画像や動画を短い記述で埋め込むことができる便利なプラグインです。こちらも自分が作成したプラグインです。

tea
Hexoブログでインスタグラムの投稿記事を埋め込むプラグインを作った

hexo-tag-twitter

Twitterのツイートを短い記述で埋め込むことができる便利なプラグインです。こちらも自分が作成したプラグインです。

tea
HexoブログでTwitterの投稿記事を埋め込むプラグインを作った

hexo-tag-soundcloud

Sound Cloudのミュージックトラックをブログに埋め込む事ができるプラグインです。こちらも自分が作成したプラグインです。

tea
ブログでSound Cloudの投稿記事を埋め込むプラグインを作った

hexo-tag-codepen

codepenを短い記述で埋め込むことができるプラグインです。

hexo-tag-twentytwenty

Before画像とAfter画像をスライダーで切り替え表示させるプラグインです。jquery.twentytwentyをHexoプラグインとして移植してみました。こちらも自分が作成したプラグインです。

tea
ブログでRAW現像写真のBeforeとAfter画像を表示させる

hexo-tag-googlemaps

google mapを短い記述で埋め込むことができる便利なプラグインです。

圧縮プラグイン

主にサイト・パフォーマンスに関わる圧縮を手助けするプラグインです。

hexo-uglify

javascriptを圧縮してくれるプラグインです。特に難しいことはなく、インストールするだけで使えます。

hexo-clean-css

cssを圧縮してくれるプラグインです。表示速度のパフォーマンスを気にする方は入れておくのをオススメします。

依存元となってるclean-cssはいろんな圧縮オプションを設定できるるんですが、hexo-clean-cssは出力先のファイルしか指定できないようです。

hexo-html-minifier

HTMLを圧縮するプラグインです。こちらも表示速度を最適化したい方にオススメです。

本家html-minifierに依存しているので、同じ圧縮オプションがそのまま使えます。私はこんな設定にしてみました。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
html_minifier:
  exclude:
  removeComments: true
  removeCommentsFromCDATA: false
  removeCDATASectionsFromCDATA: false
  collapseWhitespace: true
  conservativeCollapse: true
  preserveLineBreaks: true
  collapseBooleanAttributes: false
  removeAttributeQuotes: false
  removeRedundantAttributes: false
  preventAttributesEscaping: false
  useShortDoctype: false
  removeEmptyAttributes: false
  removeScriptTypeAttributes: false
  removeStyleLinkTypeAttributes: false
  removeOptionalTags: false
  removeIgnored: false
  removeEmptyElements: false
  lint: false
  keepClosingSlash: false
  caseSensitive: false
  minifyJS: true
  minifyCSS: true
  minifyURLs: false

またAMP HTMLを生成してくれるhexo-generator-ampでもhtml-minifierを積んでいますので、同様のhtml圧縮と多様なオプション指定が可能です。

テーマのカスタマイズに便利なプラグイン

テーマに独特の機能を追加したいときに便利なプラグインです。

cheerio

記事のhtmlデータを読み込んで、jQueyライクに操作ができるnodeのパッケージです。使う時は「チェリオー！」と唱えましょうｗ cheerioは、記事に対して共通したデータ加工を行いたい時に重宝します。

自分のブログでは、cheerioを使って、

  • 記事の中で使った写真を収集し、写真一覧にする(ページ後半)
  • 画像や動画、地図などをLazy load仕様に書き換える

などを行っています。

hexo-fs

node.jsのfs(ファイル操作)をhexoで使いたい時に使えるプラグインです。基本的にfsと同じようにファイルに関する操作ができます。

mkdirp

こちらもhexo-fsと同様にファイル操作に関するプラグインです。存在しない深い階層であっても再帰的にディレクトリ生成してくれる便利なプラグインです。hexo-fsと同時に使うとなかなか便利です。

最後に

静的ジェネレータのHexoで、一通りのページが作成できるようになりました。これからも新しいプラグインが続々と登場するので、動向をチェックしていきたいと思います。

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
  Amazonでレビューを見る
Category
Tag