Hexoブログで使ってるプラグインを公開します(package.json)|おちゃカメラ。

本日限定

Amazonタイムセール開催中

セール商品を見に行く

静的サイトジェネレーターのHexoで使ってるプラグインを公開したいと思います。これからHexoを始めてみたいという方や、Hexoでどのような実用プラグインがあるのか参考にしていただければ幸いです。

また、こんな便利なものあるよー！といった物がありましたらTwitterなどで是非教えて下さい。現在の当ブログでは、以下のような表示ができます。

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

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

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

目次：Hexoのプラグイン解説

package.json
プラグインの解説の前に。package.jsonに関する概要
Hexoプラグインの解説
最後に

package.json

まずは今使っているプラグインを晒してみたいと思います。現在のpackage.jsonは下記のような感じです。使ってるnode.jsのバージョンはv8.5とhexo v3.9となっています。

package.json

{
  "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-seo-link-visualizer": "git+https://github.com/tea3/hexo-seo-link-visualizer.git",
    "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": {
    "apac": "^3.0.2",
    "archiver": "^2.1.0",
    "async": "^2.5.0",
    "body-parser": "^1.18.3",
    "browser-sync": "^2.18.13",
    "child_process": "^1.0.2",
    "coffee-script": "^1.12.7",
    "del": "^3.0.0",
    "express": "^4.16.3",
    "flickrapi": "^0.6.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-cssbeautify": "^1.0.0",
    "gulp-ejs": "^3.0.1",
    "gulp-exec": "^2.1.3",
    "gulp-ext-replace": "^0.3.0",
    "gulp-html-beautify": "^1.0.1",
    "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",
    "he": "^1.2.0",
    "iso8601": "^1.1.1",
    "netlify": "^1.2.0",
    "nib": "^1.1.2",
    "pump": "^3.0.0",
    "run-sequence": "^2.1.0",
    "uglify-es": "^3.3.9",
    "uglify-js": "^3.3.28",
    "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-deployer-git

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

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

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

hexo-generator-archive

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

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

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

hexo-generator-feed

hexo-generator-feed

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

hexo-generator-robotstxt

hexo-generator-robotstxt

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

hexo-generator-seo-friendly-sitemap

hexo-generator-seo-friendly-sitemap

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

hexo-seo-link-visualizer

hexo-seo-link-visualizer - github ©

hexo-seo-link-visualizer

サイトのメンテナンスを行う時に便利なプラグインです。記事内のリンクを解析し、記事同士のつながりを図式化してくれます。サイトのページが増えていった際に、サイト全体の構造を把握するのに役立ちます。WordPressのShow Article Mapプラグインを参考に開発しました。

hexo-auto-link-checker

hexo-auto-link-checker -github ©

hexo-auto-link-checker

hexoでリンク切れを定期的にチェックしてくれるプラグインです。WordpressのBroken Link Checkerプラグインを意識して作ってみました。サイト内の外部リンクや内部リンク、目次のリンク先が存在するのか自動検証してくれるので、ブログの記事数が多い時に役立つはずです。

生成系プラグイン

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

hexo-include-markdown

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

hexo-include-markdown

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

hexo-generator-single-page

hexo-generator-single-page

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

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

hexo-related-popular-posts

hexo-related-popular-posts

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

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

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

hexo-toc

hexo-toc

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

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

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

hexo-front-matter-excerpt

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

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

hexo-generator-search

hexo-generator-search

サイト内検索を提供してくるプラグイン。当ブログではローカルサーバー内に限り、検索ウインドウを用意しています。

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

hexo-generator-amp

hexo-generator-amp

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

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

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

画像や動画の埋め込み

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

hexo-tag-flickr

tea3/hexo-tag-flickr

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

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

hexo-tag-instagram

hexo-tag-instagram

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

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

hexo-tag-twitter

hexo-tag-twitter

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

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

hexo-tag-soundcloud

hexo-tag-soundcloud

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

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

hexo-tag-codepen

hexo-tag-codepen

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

hexo-tag-twentytwenty

hexo-tag-twentytwenty

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

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

hexo-tag-googlemaps

hexo-tag-googlemaps

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

圧縮プラグイン

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

hexo-uglify

hexo-uglify

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

hexo-clean-css

hexo-clean-css

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

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

hexo-html-minifier

hexo-html-minifier

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

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

_config.yml

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