Netlifyに移行するついでにやったこと、ハマったこと

#hexo, #plugin, #webpack

ホスティング先をNetlifyに変更するついでにやったこと、ハマったことまとめ。

1.記事が前日のものとして公開される

Netlifyが自動デプロイした記事のパーマリンクが1日前に設定されていることに気づいた。Markdownにはdate: 2017-08-04と記述しているが、デプロイされると

http://rythgs.co/archives/2017/08/03/hogehoge/

上記のような1日前のパーマリンクになってしまう。ローカル環境でhexo generateすると大丈夫なのでhexo generateしたサーバーのtimezoneに依存するのだろう。おそらくUTCで-9時間してるんだよね。

解決法としては、すべてのMarkdownに時間まで設定してデプロイし直したらOKだった。(ex. date: 2017-08-04 12:12:12)

2.webpack導入

モジュールをバンドルするのにgulp使っていたのをwebpackに移行した。
主な変更点は以下の通り。

  • Hexoプラグインでやっていたminifyをバンドル時に実施
  • jQueryプラグイン系はすべてnpmで管理
1
yarn add --dev webpack babel-core babel-loader babel-preset-es2015
webpack.config.js
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
const webpack = require('webpack');
const path = {
src: './source/assets/js/_src',
dist: './source/assets/js',
};
module.exports = options => {
return {
entry: `${path.src}/main.js`,
output: {
filename: `${path.dist}/bundle.js`,
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
}),
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
resolve: {
alias: {
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
};
};

ハマったところ

webpack実行しようとしたらisotope-layoutの名前解決ができねーよって怒られる。
どうやらresolve設定を書いてやる必要があるみたいで。

jQueryプラグインとして使用するとエラーになったのでバニラで記述するようにした。

1
const isotope = new Isotope('.hoge', { /* options */ });

3.Hexoプラグインの見直し

Hexoで運用してしばらくたったのでプラグインを整理してみた。browsersyncやminify系プラグインを外したり。現在入れているプラグインは以下の通り。

hexo-clean-css

CSSをminifyする。JavaScriptはwebpackで実施。

hexo-html-minifier

HTMLをminifyする。

hexo-generator-robotstxt

robots.txtを生成する。

hexo-generator-feed

Atomfeedの生成。

hexo-generator-seo-friendly-sitemap

sitemap.xmlの生成。もう一つhexo-generator-sitemapがあるが、「seo friendly」と掲げているのでこちらを採用した。

4.フォント設定を見直し

Note Sans Japaneseを読み込んでいたが、1.6MBと重たいので廃止した(サブセット化するまでもない)。それとカーニング設定を追加。

1
2
3
letter-spacing: .1em
font-feature-settings: "palt" 1
font-kerning: auto

以上、内部的なお話でした。