このブログは一年くらい前から VPS 上の Wordpress で動的構築していたが，より軽量で静的なブログシステムである Hugo に移行した．けっこう苦労したので，メモ．

Hugo に移行するまで

次のようにブログの移行は二度目である．

  • 2008年に はてなダイアリー でブログを始めた．
  • 2014年に VPS 上の Wordpress に移行した．
  • 2015年に VPS 上の Hugo に移行した． ←今ココ

はてなダイアリーから Wordpress に移行したとき，エクスポートツールを使用したら（たしか Movable Type 形式でエクスポートできるツールだった），ゴミみたいな HTML タグがときどきあったり，ソースコードが期待通りに表示されていなかったり，画像リンクが外部リンクになっていたりした．修正したかったが， Mysql の知識がなかったため気が向いたときに手動で修正していた．

しかし，最初の頃は twitter のように使用していた為，投稿の数が900近くあり，全然修正が完了していなかった．今回，投稿データDBに保存されているのではなく単純なテキスト形式で保存されているため機械的修正ができて楽だった．また Windows 用のバイナリ（外部プログラムが不要！）も提供されていてローカルでの確認がとても楽だった．

移行作業の流れは次のようになる．

  1. データのエクスポート
  2. エクスポートデータの修正
  3. テーマの適用
  4. VPS上にデプロイ

今回は 1, 2, 3 のメモ．

Wordpress からのデータのエクスポート

変換スクリプト wordpress-to-hugo-exporter を利用した．README.md に記載されているように git clone してディレクトリ wordpress-to-hugo-exporter をまるごと /srv/http/wordpress/wp-content/plugins/ に移動したあと，次を実行した．

1
2
3

sudo php hugo-export-cli.php
cd /tmp
unzip wp-hugo.zip

その後 scp でローカルにコピーした（zipファイルをローカルにコピーしたあとWindowsで右クリックから展開したら，展開できなかった．どうもパスの問題のようだ）．

unzip されたファイルを見たら HTML タグが普通に残っており残念な気持になった．しかし， hugo コマンドでサイトを生成しウェブブラウザで無事に閲覧できた．どうも HTML タグの場合は変換などはせず，そのまま出力しているようだ．

エクスポートデータの修正

Wordpress からエクスポートしたデータには次のような問題があったので，それぞれ修正した．

  • ファイル名が文字化け
  • 日本語カテゴリでリンクが機能しない
  • 画像がリンク切れ
  • テーブルタグにCSSが直打ちしてある

これ以外にもあるが，簡単には修正できなそうだったので，とりあえず放置．

ファイル名の変換

Wordpress から変換した際にタイトルに日本語が含まれている投稿は変換後，ファイル名が文字化けしてたい（utf8のコードが表示されている？）．どうにかこうにか変換してみた．

エクスポートされた投稿データはファイル名が yyyy-mm-dd-title.md となっており， title の部分が文字化けしていた．単純に title 部分を削ってしまう案は同一日の投稿データが区別できなくなるので却下した．

今回は投稿データの front matter に url が次のように含まれることを利用して url に基づいてリネームした．

1
2
3

...
url: /<number>
...

例えば 2015-09-24-hogehoge.md で url: 右の数字が 1234 の場合は 2015-09-24-1234.md とリネームした．

リネームは awk など使用した次のシェルスクリプトを使用した．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#!/usr/bin/sh

for md in *.md; do
    number="$(awk '/^url/{print $2}' $md  | tr -d '/')"
    date="${md:0:10}"
    new_name="${date}-${number}.md"
    if [ ! -f "$new_name" ]; then
        echo "mv to $new_name"
        mv "$md" "$new_name"
    fi
done

日本語のカテゴリを英語に変換

Pagination の際にカテゴリ・タグが日本語だと正しくリンクが機能しなかったので，英語に変換した．各カテゴリについて以下のように sed を利用して一括変換した．

1

sed -i 's/^  - 日記/  - Diary/g' *.md

画像リンクの変換

Wordpress とはサイトの構造が変わり，画像の保存場所が変更になった． Hugo では /img/ 以下に画像を保存するようにした．

Wordpress Hugo
/wp-content/upload/foo/bar.jpg /img/foo/bar.jpg

そこで， 次を実行した．

1

sed -i -e 's|http://mano.xyz/wp-content/uploads|/img|g' *.md

移行の際に楽だと考えて，絶対パスから相対ルートパスに変更した．

テーブルの変換

Wordpress から エクスポートしたデータはスタイルが直打ちされていた．

1

<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">

Hugoテーマで purecss を使用しているので，例えば次のように変更する．

1

<table class="pure-table">

そこで次を実行した．

1

sed -i -e 's/<table .*>/<table class="pure-table">/g' *.md

テーマ

purehugo というテーマを自分の環境にあわせて変更したテーマ を使用した．久しぶりに HTML とか CSS を書いた．

Wordpress に比べるとテーマは少ない．また Wordpress にあたるプラグインはないので，プラグイン相当のことは自分でテーマを変更する必要がある．変更といっても，欲しい機能が実装してあるテーマから該当する部分をコピーして適当に貼り付けてば良いだけなので，そこまで大変ではない．

単純にコピーして期待通りの結果が得られなかった場合は面倒かもしれないが公式のドキュメントに一回目を通しておくほうが，結果として時間短縮につながると思う．

（おまけ）Hugo のサイト生成時間について

Hugo は高速なサイト生成が特徴の一つであり，実際，貧弱なCPUのVPS上でも約1秒でサイト生成が完了した．

1
2
3
4
5
6
7
8
9

% time hugo
0 draft content
0 future content
884 pages created
367 paginator pages created
0 tags created
37 categories created
in 1346 ms
hugo  2.00s user 0.21s system 152% cpu 1.450 total

1
2

% uname -s -r -v -i -o
Linux 4.1.8-1-lts #1 SMP Tue Sep 22 17:49:49 CEST 2015 unknown GNU/Linux

ただ，Windows上で実行すると約3秒かかる．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ time hugo
0 of 1 draft rendered
0 future content
884 pages created
367 paginator pages created
0 tags created
37 categories created
in 2531 ms

real    0m2.872s
user    0m0.000s
sys     0m0.000s

1
2

$ uname -s -r -v -i -o
MINGW64_NT-10.0 2.3.0(0.290/5/3) 2015-09-16 19:07 unknown Msys

他の静的サイトジェネレータに比べ高速なのは言語だからなんでしょうか？(参考: https://www.staticgen.com/)