WordPressからローカル環境のHexoを作成

tools
  1. 環境
  2. インストールに必要なもの
  3. Hexo インストール
  4. ローカルで動作確認
  5. デフォルトの_config.yml設定
  6. 記事作成時のテンプレート
  7. Hexoで記事作成
  8. WordPressからデータ移行
  9. まとめ
  10. 追記

先に言っておきますが、WordPressからの移行は非常に面倒なことが起きたので、あまりオススメしません。
新規作成するならオススメです。

WordPressを10年以上使ってきましたが、テーマやプラグインやらの更新がとにかく面倒で、更新に時間を取られて記事を書く頻度が落ちていました。
下書きはMarkdownで書いていたので、これが使えて気軽に更新でき、バージョン管理もできそうな、静的サイトジェネレーターへ移行することにしました。

実は、大分前からHexoに移行しようとローカルで色々やっていました。
気になったテーマを触って試行錯誤しながら、なんか違うみたいなことがよくあって、その度に他のテーマを探したり、Hugoを少し試してみたりもしました。
結局、あまり知識はないけれども、プラグインもそこそこあってそんなに難しくなさそうな気がして、ネットでも情報が比較的探しやすかったHexoにしました。
ちなみに、中華圏で人気があるようです。

気づいてみれば1年過ぎているんですが…どういうことなの?

環境

インストールに必要なもの

GitHub - coreybutler/nvm-windows
Node.jsは更新が早めなので、バージョン管理は必須に近いと思います。
違うバージョンも気軽に試しやすくなるのは助かります。
zip版を使用中。

GitHub - git-for-windows
ポータブル版を利用しています。

どちらも、パスを通す必要がありますが、Rapid Environment Editor Portable 8.0 build 919 Development Test 1 | PortableApps.comで通しました。

後、コマンドプロンプトの操作をそこそこ使うので、コンソールエミュレータを使うのもいいかと思います。
Cmder | Console Emulator
cmder_miniを使っていますが、下記以降はコマンドプロンプトとして説明しています。
これもパスを通す必要があります。

Hexo インストール

Documentation | Hexo

基本的には、公式通りに進めれば問題なかったはずです。

コマンドプロンプトの管理者として実行

npm install hexo-cli -g

インストール場所

C:\tools\hexoにインストールすることにします。

コマンドプロンプトの管理者として実行

hexo init C:\tools\hexo
cd C:\tools\hexo
npm install

インストール場所を作成し、作成したフォルダに移動して、npmをインストール

ローカルで動作確認

初期テーマで表示確認します。

以下のコマンドは基本的に、コマンドプロンプトでC:\tools\hexoに移動してから操作します。

hexo server

省略形

hexo s

表示確認するときに、OSのファイアウォール表示が出たと思うので、許可しておきます。

記事の内容などは、ブラウザをリロードするだけで修正点が反映されます。
_config.ymlを修正した時は、一度Hexoを停止させて再実行しないと反映されないです。
停止は、画面にCtrl-cを押せば止まると表示されているので、指示に従って止めます。

デフォルトの_config.yml設定

Configuration | Hexo
後は、公式通りにカスタマイズしていけばいいと思いますが、少し変えた部分を載せておきます。

C:\tools\hexo\_config.yml

パーマリンク

18行目

permalink: :year/:month/:day/:title/

下記へ

permalink: :year:month:day/

パーマリンクですが、昔は同じ日に記事を2個書いたこともありますが、今は1つ以上書くことはないので簡潔にしました。そもそも頻度がもっと低いという。
お陰でURLも短くできました。

WordPressのときは、時間、分、秒まで入れないと、日別アーカイブのURLになり、正常に表示されなかったはずです。
Hexoのアーカイブ表示は、基本的に年表示だけだと思うので大丈夫でしょう。

投稿名

Hexoの新規投稿をちょっと使いやすくする - Qiita

32行目

# Writing
new_post_name: :title.md # File name of new posts

下記へ

# Writing
new_post_name: :year/:month:day-:title.md # File name of new posts

デフォルトだと、新規記事は_postsフォルダ直下に全部纏められてしまい、記事数が多くなると管理が大変になります。
なので、\_postsフォルダ直下に年別フォルダを作成し、新規投稿ファイル名は月-日-タイトルで作成するようにしています。

記事作成時のテンプレート

Hexo の 新規投稿テンプレート を カスタマイズ | 験なきものを思はずは

テーマによっても少し変わってきます。

C:\tools\blog\scaffolds\post.md

post.md

---
title: {{ title }}
date: {{ date }}
tags:
---

下記へ

---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories:
  -
tags:
  -
---

updattedを入れて設定しておかないと、記事を修正したときに日付が更新した日付で投稿されます。
誤字や脱字の修正のこともあるので、入れておいたほうが無難かなと。
更新したときは、updatedの値を変えますが、日付があれば時間表記はなくてもいいです。
つい忘れてしまいますが、記事を更新したらupdatedの値を変更するのを忘れないようにします。

Hexoで記事作成

コマンドプロンプトでC:\tools\hexoへ移動してから

hexo new [layout] <title>

省略形

hexo n <title>

レイアウトを指定していない場合は、Hexoは_config.ymlからdefault_layoutを使用するので、基本的には[layout]部分はいらないはずです。

削除したい場合は、エクスプローラーなどでMarkdownファイルを削除でいいです。

WordPressからデータ移行

xmlファイルをエクスポート

エクスポートしたのが1年ぐらい前なので、何か間違っている部分があるかもしれないです。

WordPressログイン > ツール > エクスポート > すべてのコンテンツ > エクスポートファイルをダウンロード

hexo-migrator-wordpressプラグインをインストール

GitHub - hexojs/hexo-migrator-wordpress: WordPress migrator for Hexo.

コマンドプロンプトの管理者として実行でC:\tools\hexoへ移動してから

npm install hexo-migrator-wordpress --save
hexo migrate wordpress < source >

< source >は、ダウンロードしたxmlファイルのパス

インポートした記事のファイル名の文字化け

日本語部分が文字化けしました。xmlが何故か文字化けしていたので諦めるしかなかった。
一つづつ地道に直した。

ファイル名の半角スペースの代わりに_を使いたかったのですが、Hexoは_を付けた記事を除外するので、-で半角スペースの代わりにしました。

古い記事を削除

アクセスがほぼ無かったのと、後から読みたいものが特になかったので、2007~2012年の300記事ほどを削除。
記事が多くなると記事の生成が遅くなっていくらしいので、今のうちに大掃除です。

記事のMarkdownを修正

インポートした記事のurlとid部分

記事の最初に---で囲まれているフロントマターの部分。
いらないと思うので削除。

Markdownで書いていない古い記事の改行などを修正

改行や空白行は半角スペースに変わっているので、手動で直しました。

記号のエスケープ(無効化)

[]内に文字入力している場合、 最初に\[でエスケープされているが、最後に\]でエスケープされていておかしくなっている部分があるので修正。

その他

コードも念の為、見直したほうがいい気がします。

画像管理

Hexoで管理しないで、Cloudinaryなどの画像CDNサービスなどで管理した方が後々楽かなと思います。
圧縮する前の画像をアップロードしておけるのも利点ですね。
移転するときに画像をそこまで多用していなかったのもあり、記事修正よりは楽でした。

記事中にMarkdown形式で画像を表示する場合

![alt属性](画像URL "title名")

title部分は省略して使っていますが、MarkdownでなくてHTMLで書いても大丈夫です。

まとめ

ここまでで、とりあえずのローカル環境で移行できました。
WordPressのデータを移行するのは面倒でしたが、新規作成だけで設定も殆ど弄らなければかなり早く作れます。

後は、Themes | Hexoなどからテーマを探してカスタマイズして、GitHubなどのプライベートリポジトリでバージョン管理をしていくといいと思います。
そして、デブロイしてサイト公開ですね。

RSSのアドレスが変わりました。
実は、前に使っていたWordPressのテーマでAtom形式は出力していたのですが、殆どの方はそちらではないと思うので、購読されていた方はお手数ですが変更をお願いします。

追記

2019-05-07
各説明に追加