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

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

Static Site Generators

Hexoに移行するにあたって

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

Middleman	Hexo
SASS	Stylus
Haml	EJS

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すると以下のように配置される。

public/
  assets/
    img/
      post-image.png
      theme-image.png

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

Asset Pipelineが欲しい

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

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

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

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のみを読み込むようにしておく。

.babelrc

{
  "presets": ["es2015"],
  "compact": false
}

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

プラグインで拡張する

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

rythgs.co

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

Hexoに移行するにあたって

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

Asset Pipelineが欲しい

プラグインで拡張する

hexo-all-minifier

hexo-browsersync

hexo-deployer-git

hexo-generator-feed

hexo-generator-sitemap