Googleウェブマスターツールから、サイトのモバイルユーザビリティに問題あるぞという通知が来ていて、デザインを変えたいなーと思っていた。

  • イチから作るのは面倒、モバイルデバイスにも対応している既存デザインを使いたい。
  • サイトは静的ファイル公開で完結したい。
  • MTのテンプレートにちょうどいいのが見つからない(かつ「再構築」待ちがなんだかおっくうになってた)
  • Octopressのテーマにいいのがある
    3rd Party Octopress Themes
  • OctopressはコアがJekyllらしい。
  • Movable TypeからJekyllへのimporterがある

といことでまずはJekyllに移行。

Movable Type » Octopress/Jekyll

やはり移行ツールがあると、ちょっと試してみるかという気になる。
以下のページを参考にMTのDB(MySQL)接続設定を書いて実行するだけで簡単に MTの記事をjekyll形式のファイルにエクスポートできた。
http://import.jekyllrb.com/docs/mt/

テーマを適用しようとしてちょいちょいいじり始めたけどなんだか生成が遅い。 ちょっと修正して確認するのに、130エントリでwatch状態からの生成時間が18secほどかかるのはなかなかつらい。

Jekyll » Hugo

調べてみるとHugoというのが速くてよいらしい。

記事ソースファイルに完全な互換はないけどちょいスクリプト加工でなんとかなりそう。 レスポンシブ対応してるテーマもあるし。
https://github.com/spf13/hugoThemes/

記事ソースファイル

  • Jekyll-importでインポートした状態。

    ---
    layout: post
    title: GAEアプリケーションを HRDに移行
    date: '2012-10-14 15:37:05 +0900'
    mt_id: 131
    blog_id: 2
    post_id: 131
    basename: gae_hrd
    categories:
    - gae
    ---
    (本文)
    
  • awkを使って日付の書式と、slug部分を加工。
    *_idは不要だけどなんとなく残した。
    typeはなくてもいい感じがしたけど、テーマの方で生成条件付けに使えるので適当に設定

    ---
    title: GAEアプリケーションを HRDに移行
    date: '2012-10-14T15:37:05+09:00'
    mt_id: 131
    blog_id: 2
    post_id: 131
    categories:
    - gae
    slug: gae-hrd
    type: post
    ---
    (本文)
    

ディレクトリ構成(抜粋)

  • 元々のURLを変更しない前提で
    • uglyurlsをtrueに
    • publishdirをpublicから一段掘り下げ(MTのときは記事のpathが/mt/archives/YYYY/MM/xxxx.htmlという感じだった)
  • content/下については年単位ぐらいでディレクトリわけたい+年月日でソートできるようにしたいのでこんな感じに。実際の出力先pathはfront matterのslugとconfig.ymlで調整
config.yml
content/
  archives/
    2012/
      2012-10-14-gae-hrd.html
      ...
public/
  index.html <- 手書き
  mt/ <- ここから下がhugoでの生成
    index.html
    archives/
      2012/
        10/
          gae-hrd.html
static/
  css/
    custom.css <- テーマのcss上書き分
themes/
  テーマ/

config.yml(抜粋)

---
baseurl: "http://passing.breeze.cc/mt/"
publishdir: "public/mt/"
languageCode: "ja"
title: "あぁ そうだった"
canonifyurls: true
builddrafts: false
uglyurls: true
pluralizeListTitles: false
permalinks:
  archives: /archives/:year/:month/:slug.html
  verbose: true
  theme: "beg-modified"
  MetadataFormat: "yaml"

生成

  • あとはディレクトリ構成のトップでhugoコマンドを叩くだけ。生成時間0.5secほど。速い。

感想など

  • 速い。
  • 編集中LiveReloadがすごく便利。ファイル更新を検知して再生成、ブラウザで生成ページを開いていれば再生成に連動してreloadされる。
    http://gohugo.io/extras/livereload/

    • hugoを仮想マシンlinux内で動かしつつ手元のWindowsからterminalでloginしてviで編集、手元のWindows機でブラウザ実行しているので下記のようなコマンドラインを使っている。

      hugo server -w --baseUrl=http://local-env.local:3000/mt/ --bind=0.0.0.0 --port=3000
      
  • 移行を始めたときはv0.14だったのだけど、テンプレートプロパティのdeprecate予告がありテンプレート修正した。これからも変化しそう。

    • .Site.BaseUrl -> .Site.BaseURL
    • .Site.Recent -> .Site.Pages
    • .Url -> .URL

環境

  • CentOS 6.6 x64
    • hugo v0.15-DEV
    • ruby 2.2.0p0 x64
      • jekyll-import 0.7.1