• HugoでLiveReloadされない

    • 出力されたhtmlに</body>がないと、jsコードが差し込まれずLiveReloadされない。

    MTからJekyllを介してHugoに移行」に書いたように、 編集中serverにファイル更新をwatchさせるLiveReloadが便利。

    hugo server --watch --port=3000
    

    </body>の前に以下のようなjsコードが差し込まれ、hugo server側の再生成に連動して開いているページがreloadされる。

    <script data-no-instant>document.write('<script src="http://'
            + (location.host || 'localhost').split(':')[0]
            + ':3000/livereload.js?mindelay=10"></'
            + 'script>')</script>
    

    </body>がないと、jsコードが差し込まれずLiveReloadも行われない。

    利用したテンプレートが先進的でhtml/head/bodyタグがなかったことから、LiveReloadが有効にならず悩んだ。

    環境

    • CentOS 6.6 x64
      • hugo v0.15-DEV
      • ruby 2.2.0p0 x64
        • jekyll-import 0.7.1
  • MTからJekyllを介してHugoに移行

    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