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

, ,

ホスティング先を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で管理
yarn add --dev webpack babel-core babel-loader babel-preset-es2015
webpack.config.js
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プラグインとして使用するとエラーになったのでバニラで記述するようにした。

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と重たいので廃止した(サブセット化するまでもない)。それとカーニング設定を追加。

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

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