WordPressからローカル環境のHexoを作成
先に言っておきますが、WordPressからの移行は非常に面倒なことが起きたので、あまりオススメしません。
新規作成するならオススメです。
WordPressを10年以上使ってきましたが、テーマやプラグインやらの更新がとにかく面倒で、更新に時間を取られて記事を書く頻度が落ちていました。
下書きはMarkdownで書いていたので、これが使えて気軽に更新でき、バージョン管理もできそうな、静的サイトジェネレーターへ移行することにしました。
実は、大分前からHexoに移行しようとローカルで色々やっていました。
気になったテーマを触って試行錯誤しながら、なんか違うみたいなことがよくあって、その度に他のテーマを探したり、Hugoを少し試してみたりもしました。
結局、あまり知識はないけれども、プラグインもそこそこあってそんなに難しくなさそうな気がして、ネットでも情報が比較的探しやすかったHexoにしました。
ちなみに、中華圏で人気があるようです。
気づいてみれば1年過ぎているんですが…どういうことなの?
環境
- Windows10 64bit
- Hexo 3.8.0
インストールに必要なもの
- Node.js
- Git
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 インストール
基本的には、公式通りに進めれば問題なかったはずです。
コマンドプロンプトの管理者として実行
1 | npm install hexo-cli -g |
インストール場所
C:\tools\hexoにインストールすることにします。
コマンドプロンプトの管理者として実行
1 | hexo init C:\tools\hexo |
インストール場所を作成し、作成したフォルダに移動して、npmをインストール
ローカルで動作確認
初期テーマで表示確認します。
以下のコマンドは基本的に、コマンドプロンプトでC:\tools\hexoに移動してから操作します。
1 | hexo server |
省略形
1 | hexo s |
表示確認するときに、OSのファイアウォール表示が出たと思うので、許可しておきます。
記事の内容などは、ブラウザをリロードするだけで修正点が反映されます。_config.ymlを修正した時は、一度Hexoを停止させて再実行しないと反映されないです。
停止は、画面にCtrl-cを押せば止まると表示されているので、指示に従って止めます。
デフォルトの_config.yml設定
Configuration | Hexo
後は、公式通りにカスタマイズしていけばいいと思いますが、少し変えた部分を載せておきます。
C:\tools\hexo\_config.yml
パーマリンク
18行目
1 | permalink: :year/:month/:day/:title/ |
下記へ
1 | permalink: :year:month:day/ |
パーマリンクですが、昔は同じ日に記事を2個書いたこともありますが、今は1つ以上書くことはないので簡潔にしました。そもそも頻度がもっと低いという。
お陰でURLも短くできました。
WordPressのときは、時間、分、秒まで入れないと、日別アーカイブのURLになり、正常に表示されなかったはずです。
Hexoのアーカイブ表示は、基本的に年表示だけだと思うので大丈夫でしょう。
投稿名
32行目
1 | # Writing |
下記へ
1 | # Writing |
デフォルトだと、新規記事は_postsフォルダ直下に全部纏められてしまい、記事数が多くなると管理が大変になります。
なので、_postsフォルダ直下に年別フォルダを作成し、新規投稿ファイル名は月日-タイトルで作成するようにしています。
記事作成時のテンプレート
Hexo の 新規投稿テンプレート を カスタマイズ | 験なきものを思はずは
テーマによっても少し変わってきます。
C:\tools\blog\scaffolds\post.md
post.md
1 | --- |
下記へ
1 | --- |
updattedを入れて設定しておかないと、記事を修正したときに日付が更新した日付で投稿されます。
誤字や脱字の修正のこともあるので、入れておいたほうが無難かなと。
更新したときは、記事のupdatedの値を変えますが、日付があれば時間表記はなくてもいいです。
つい忘れてしまいますが、記事を更新したらupdatedの値を変更するのを忘れないようにします。
Hexoで記事作成
コマンドプロンプトでC:\tools\hexoへ移動してから
1 | hexo new [layout] <title> |
省略形
1 | 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へ移動してから
1 | npm install hexo-migrator-wordpress --save |
1 | hexo migrate wordpress < source > |
< source >は、ダウンロードしたxmlファイルのパス
インポートした記事のファイル名の文字化け
日本語部分が文字化けしました。xmlが何故か文字化けしていたので諦めるしかなかった。
一つづつ地道に直した。
ファイル名の半角スペースの代わりに_を使いたかったのですが、Hexoは_を付けた記事を除外するので、-で半角スペースの代わりにしました。
古い記事を削除
アクセスがほぼ無かったのと、後から読みたいものが特になかったので、2007~2012年の300記事ほどを削除。
記事が多くなると記事の生成が遅くなっていくらしいので、今のうちに大掃除です。
記事のMarkdownを修正
インポートした記事のurlとid部分
記事の最初に---で囲まれているフロントマターの部分。
いらないと思うので削除。
Markdownで書いていない古い記事の改行などを修正
改行や空白行は半角スペースに変わっているので、手動で直しました。
記号のエスケープ(無効化)
[]内に文字入力している場合、 最初に\[でエスケープされているが、最後に\]でエスケープされていておかしくなっている部分があるので修正。
その他
コードも念の為、見直したほうがいい気がします。
画像管理
Hexoで管理しないで、Cloudinaryなどの画像CDNサービスなどで管理した方が後々楽かなと思います。
圧縮する前の画像をアップロードしておけるのも利点ですね。
移転するときに画像をそこまで多用していなかったのもあり、記事修正よりは楽でした。
記事中にMarkdown形式で画像を表示する場合
1 |  |
title部分は省略して使っていますが、MarkdownでなくてHTMLで書いても大丈夫です。
まとめ
ここまでで、とりあえずのローカル環境で移行できました。
WordPressのデータを移行するのは面倒でしたが、新規作成だけで設定も殆ど弄らなければかなり早く作れます。
後は、Themes | Hexoなどからテーマを探してカスタマイズして、GitHubなどのプライベートリポジトリでバージョン管理をしていくといいと思います。
そして、デブロイしてサイト公開ですね。
RSSのアドレスが変わりました。
実は、前に使っていたWordPressのテーマでAtom形式は出力していたのですが、殆どの方はそちらではないと思うので、購読されていた方はお手数ですが変更をお願いします。
追記
2019-05-07
各説明に追加
