この記事を書いてる人: 
tea

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

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

ちなみに、当ブログの表示例は以下のような感じです。

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

また、WordpressからHexoに引っ越して1年の感想も別の記事でまとめています。もし興味がございましたら、そちらもご覧ください。

自身のブログ
WordpressからHexoにブログ移行して分かったメリット・デメリット

keyboard

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
81
82
83
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.3.9"
},
"dependencies": {
"cheerio": "^1.0.0-rc.2",
"gulp-imagemin": "^3.3.0",
"hexo": "^3.3.9",
"hexo-clean-css": "0.0.3",
"hexo-deployer-git": "^0.3.1",
"hexo-deployer-netlify": "git+https://github.com/tea3/hexo-deployer-netlify.git",
"hexo-front-matter-excerpt": "^0.2.0",
"hexo-fs": "^0.2.2",
"hexo-generator-amp": "^3.0.9",
"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.21",
"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.2",
"hexo-include-markdown": "^1.0.2",
"hexo-related-popular-posts": "^2.0.2",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.2.2",
"hexo-tag-codepen": "^0.2.2",
"hexo-tag-flickr": "git+https://github.com/tea3/hexo-tag-flickr.git#enable_cache_and_get_image_size",
"hexo-tag-googlemaps": "^1.2.1",
"hexo-tag-instagram": "^1.0.3",
"hexo-tag-random-embed": "git+https://github.com/tea3/hexo-tag-random-embed.git",
"hexo-tag-soundcloud": "^1.0.2",
"hexo-tag-twentytwenty": "0.0.4",
"hexo-tag-twitter": "^1.0.1",
"hexo-toc": "git+https://github.com/tea3/hexo-toc.git",
"hexo-uglify": "0.0.4",
"marked": "^0.3.6",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"node-sass": "^4.5.3"
},
"devDependencies": {
"async": "^2.5.0",
"browser-sync": "^2.18.13",
"child_process": "^1.0.2",
"coffee-script": "^1.12.7",
"del": "^3.0.0",
"glob": "^7.1.2",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-ejs": "^3.0.1",
"gulp-exec": "^2.1.3",
"gulp-ext-replace": "^0.3.0",
"gulp-html-minifier": "^0.1.8",
"gulp-include": "^2.3.1",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-rev": "^8.0.0",
"gulp-rev-collector": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-slim": "^0.3.0",
"gulp-stylus": "^2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-uncss": "^1.0.6",
"iso8601": "^1.1.1",
"nib": "^1.1.2",
"run-sequence": "^2.1.0",
"watch": "^1.0.2"
}
}

それでは、上記のインストールパッケージについて、詳しく見ていきたいと思います。

package.jsonに関する概要

まず、当ブログで使っているpackage.jsonの大まかな役割をまとめたいと思います。

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

各プラグインは最新のものや、過去のバージョンを敢えて固定してインストールしています。

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

バージョン固定方法については、package.jsonの中で指定しているバージョンナンバーで判断する事ができます。バージョンナンバーに^(キャレット)が無いものは、バージョンを固定してインストールしています。

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

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

package.jsonのバージョンが、git+https://github.com/〜で始まるものはGithubリポジトリにあるパッケージをインストールする事を意味しています。Githubリポジトリに公開しているパッケージをインストールする理由は様々ですが、既存のプラグインを独自にカスタマイズ、または新規で作成したオリジナルプラグインを利用したい場合に指定しています。

Gulpタスクについて

package.jsonのdevDependenciesでは、Gulpに関するパッケージが多くを占めています。GulpではCSSやJSのコンパイルや生成、画像の最適化などを行う処理を自動で行っています。

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

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

Hexoプラグインの解説

それでは、package.jsonで使っている各プラグインについて説明していきたいと思います。

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

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

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

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

必須プラグイン

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

hexo-deployer-git

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

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

2017年以降、ブログのホスティングサービスをgithub pagesからnetlifyに移行したので、最近はhexo-deployer-netlifyを使っています。

hexo-generator-archive

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

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

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

hexo-generator-feed

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

hexo-generator-robotstxt

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

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に対して、新たに1つのAMP HTMLを生成します。

こちらは自分が作成したプラグインです。静的サイトという利点を活かして、AMP HTMLファイル生成直後に記述の妥当性を自動チェックすることができます。

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

画像や動画の埋め込み

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

hexo-tag-flickr

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

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

hexo-tag-instagram

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

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

hexo-tag-twitter

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

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

hexo-tag-soundcloud

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

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

hexo-tag-codepen

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

hexo-tag-twentytwenty

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

ブログで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データを読み込んで、jQueryライクに操作ができるnode.jsのパッケージです。cheerioは、記事に対して共通したデータ加工を行いたい時に重宝します。

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

  • 記事の中で使った写真を収集し各作例の写真一覧にする
  • 画像や動画、地図などをLazy load仕様に書き換える

などを行っています。

hexo-fs

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

mkdirp

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

最後に

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

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

Hexoブログで使ってるプラグインを公開します - TPB
https://photo-tea.com/p/usecase-of-hexo-plugin/

 おすすめ記事
Ads
 作例掲載