Hello Hexo, 静的サイドジェネレータを Hexo に完全移行しました

#gulp, #hexo, #javascript, #node

いい加減 Middleman v4 系にアップデートしなければと思いつつ、他のジェネレータはないのかと Static Site Generators を見てみると HexoHugo がキテるっぽい。どうせならすべて Node(JavaScript) で完結したいと思っていたので、このブログを Hexo に完全移行することにした。

Static Site Generators

Hexo に移行するにあたって

郷に行っては郷に従えということでデフォルト Hexo に従いテンプレートエンジンと CSS は以下の通りに移行した。

MiddlemanHexo
SASSStylus
HamlEJS

SASS は borbon を使っているので代替フレームワークは kouto swiss を採用。大体はそのまま移行できるが、modular-scale など細かいところで違いが見受けられたのでドキュメント見つつ修正を施した。ポイントは以下の通り。

  • modular-scale
  • Stylus 記法
  • Partial の import はアンダーバーまで書く

テーマの移行は Hexo 関係なく Stylus と EJS を黙々と書けば良いので、以下では Hexo の仕様に合わせるところを主にあげたいと思う。

リソースはどこで管理すべきか

画像の管理は Asset Folders という機能があるのでそれを使うと良いらしい。
が、記事ごとにディレクトリが生成されてウザいので source/assets/img の中で管理することに。デプロイした時には source がドキュメントルートになる。どうやらテーマの source も同じ構成にしておけば hexo generate した時にマージされて配置される。例えば、

  • source/assets/img/post-image.png
  • theme/{theme-name}/source/assets/img/theme-image.png

上の 2 つの画像は hexo generate すると以下のように配置される。

1
2
3
4
5
public/
assets/
img/
post-image.png
theme-image.png

この動きは source ディレクトリ配下のすべてのファイルに適用される。

Asset Pipeline が欲しい

Middleman にあって Hexo にないもの、それは Asset Pipeline ってことで JavaScript などは自前で結合する必要がある(まぁしなくても良いけど)。この辺りは Gulp で自動化しつつ、jQuery などのライブラリやプラグインは npm で管理することにした。ついでに ES2015 で書きたいので Babel を導入。

1
2
cd theme/rythgs
npm install --save-dev gulp gulp-concat babel babel-preset-es2015 gulp-babel gulp-plumber

ファイル結合して babel 通して保存する簡単な処理を書きます。

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
var gulp = require('gulp'),
concat = require('gulp-concat'),
babel = require('gulp-babel'),
plumber = require('gulp-plumber');
var config = {
// 結合したい JavaScript たち
src: [
'./node_modules/jquery/dist/jquery.min.js',
'./source/assets/js/_src/**/*.js',
],
dist: './source/assets/js/'
};
gulp.task('build', function() {
return gulp.src(config.src)
.pipe(plumber())
.pipe(concat('all.js'))
.pipe(babel())
.pipe(gulp.dest(config.dist));
});
gulp.task('watch', function() {
gulp.watch(config.src, ['build']);
});
gulp.task('default', ['watch']);

package.json からライブラリを自動で読み込みたいが、そこまでする量ではないのでベタ書き。テンプレートでは all.js のみを読み込むようにしておく。

1
2
3
4
{
"presets": ["es2015"],
"compact": false
}

ES2015 を使うので .babelrc に設定を書く。
自動で圧縮してくれるが圧縮は後述するプラグインに任せるのでオフっておく。

プラグインで拡張する

必要なものは大体プラグインで用意されているので npm でインストールする。

hexo-all-minifier

html, css, js, image を圧縮する。hexo server の時も動作してしまう ので hexo generate の時だけ有効化するのが良い。この辺り自動でやってくれるようにならないだろうか。

hexo-browsersync

言わずもがな。自動リロード。
※これ使ってると HTML のお尻が文字化けするバグがある。

hexo-deployer-git

GitHub にデプロイするのに必要。

hexo-generator-feed

atom.xml の出力。

hexo-generator-sitemap

sitemap.xml の出力。


そんなわけで Middleman から Hexo に完全移行し快適なブログ環境が整った。
Middleman と違ってテーマが完全に分離できて一から作るのも楽。そして何と言っても Node で完結するようになったのが個人的に大きなポイントでございました。あ、コード表示が highlight.js でちょっとリッチになったのも嬉しい :-P