WordpressからHexoに移行してGitHub Pageで公開した

2015-05-16

web

ブログを長年使ってきたwordpressから重い腰を上げてHexoに移行した。
移行にあたり、やったことをメモにしておく。

staticgen.com を見ながらHexoかHugoか悩んだが、比較的にwordpressから移行した情報が多いのでHexoにした。

特にnodeかGoかという理由ではなく、一度Static Generatorに移行できれば、あとは大きく変わらずに渡り歩けるだろうという軽い気持ち。

Hexoに移行するにあたり行った手順は大きく分けて

wordpress記事のslugを英語化
wordpressのデータexport
Hexoデータをmigrate
wordpressの投稿からredirectできるようにalias作成
画像パスの変換
ブログのリダイレクト
Hexo運用でやったこと

となった。

wordpressの記事のslugを英語化

Hexoに移行するにあたり、wordpressからexportした記事をmigrationするツールを使うが、
このツールだとwordpressでexportしたxmlの各投稿情報の wp:post_name の値をHexoのmarkdownファイルのファイル名として使ってしまう。

したがって、日本語などの場合URLエンコードされてしまい、どうやらうまくいかない。
ということでまずこの値を英語に翻訳する必要があった。

wp:post_nameはwordpressのslugということなので、全投稿のslugを自動翻訳する wp-slug-translate を使った。

wp-slug-translateは内部でMicrosoft Translator APIを使っているらしく、Microsoft Azure Marketplace にアカウント作成が必要だ。

詳しい手順は WordPressのスラッグを日本語から英訳してくれるプラグイン「WP Slug Translate」を参考にすすめた。

プラグインを有効化したのちに、管理画面から記事を数十件ごとに更新することで翻訳される。
この状態で、wordpressのデータをexportする準備が整った。

wordpressのデータをexport

WordPress管理画面＞ツール＞エクスポートから全てのコンテンツをexportする。
これだけ。

Hexoデータへのコンバート

hexoのドキュメントにあるように、hexo-migrator-wordpress を使ってmigrationを行う。
これで投稿記事がhexoの記事形式のmarkdownファイルにmigrateできる。

wordpressの投稿からredirectできるようにalias作成

wordpressの記事のURL形式にもよるが、これまでwordpressの記事を category/記事ID/ という形式で運用していたが、Hexoでは YYYY/MM/dd/ファイル名/ で運用することになるので、リダイレクトする必要がある。

Static Generatorを使っている場合、リダイレクトするには移行前のURL直下にindex.htmlを置き、metaタグで refresしてリダイレクトすることで可能っぽい。

hexo-generator-alias を使うことでHexoのgenarate時にalias用のindex.htmlを作ることが可能。
あとは、各記事にalias用の設定を追加する。

wordpressの投稿URLはexportしたxmlにlinkタグの値となるので、簡単なスクリプトでhexo-generator-aliasの設定を追加した。

xmlのパーサーにはogaを使ってみた。

これで /blog/CATEGORY/POST_ID/ アクセスで該当の記事にリダイレクトされるようになった。
今回は運用をサブドメインにもいこうしたので、URIにblogが重複しているのは気にしない。

ここまでで、ほぼ完了した感じ。

画像パスの変換

残りは画像のパスを修正する。画像ファイルを全てダウンロードし、public/images/へそのまま放り込んだ。
あとはパスを以下のスクリプトで変換した。

/wp-contentt/uploads/ を /images/ に変換しているだけ。

ブログのリダイレクト

今回はドメインもサブドメインでの運用にかえるので、.htaccessで記事を301リダイレクトする。

結果としてこのやり方で移行できていないものは、

ソーシャルなどのURLは引き継げない
RSSなどフィード情報はリダイレクトにいたっていない
Disqus 使うことにしたのでworpressのコメントを引き継げない

ということに至った。

ちなみにHexoではRSS feedを使うために別途 hexo-generator-feed をインストール必要があった。

あと、テーマはとりあえず最低限必要なものを自作した。

package.jsonは以下のようになった。npm scriptsでHexoコマンドを叩いている。

Hexoで運用するためにやったこと

wordpressから移行して、Hexoで運用するにあたりGitHub Pagesを利用することにした。

使っていたドメインプロバイダーではGitHub Pagesでの独自ドメインを使えなかった。そこで、CloudFlareだと無料プランでも Universal SSL でも使えるということを見つけたので、ネームサーバーを CloudFlare に移行した。

CloudFlareに申し込むと、ネームサーバーを指定されるので、ドメインプロバイダーの管理ページでDNSサーバーをCloudFlareに向ける。
あとは、ホスト名を書いたCNAMEファイルをドキュメントルートに配置するだけで、独自ドメインでの運用がすんなりとできた。

当初はBitbucketでも同じことができるので、そちらを使うか迷っていたが Associate an existing domain with an account を見る限り、CNAMEでの運用はできなくなったぽい。

Hexo使ってわかったことは作者が台湾の方ということもあり、英語記事と同じくらい中国語の記事も出てくる。

69log

福岡でwebの仕事をしています