ブログ立ち上げにあたり、wordpressを使用しておりましたが、動的なサイトがあまり好みではなく、アクセス数が増えたらとか（今のところ全く大丈夫ですが…）、今後レンタルサーバー解約したくなったら（DB使えなくなる）等々考えると、やはり静的に構築し直したいと考えるようになりました。
そこで、Hexoという静的サイトジェネレーターを使用し、サイト改修することにしました。

静的サイトジェネレータ

静的サイトジェネレータ（Static Site Generator）とは、記事用のテンプレートファイル等をフレームとして、指定の記事データを展開し、HTMLを生成してくれるというようなツールです。
先にも触れましたが、Wordpressなどは動的にページを生成するツールとなっており、ユーザーがアクセスしたらサーバー側の処理により、そのページを構築する仕組みとなっているため、過多なアクセスがあった場合のサーバー負荷の心配や（ex. サーバーダウン等）、構築のプロセスが必要なためにページ読み込みの時間がかかる場合等があります（ex. SEO評価ダウン、コンバージョン率の低下等の影響）
もちろん動的サイトだと、フロントエンド側のコードやサーバーのチューニング等の品質が良いと、先の懸念事項が問題ないレベルにすることは可能ですし、例えば、特に何も考えずWordpressを使っていても、特殊なことをしない限り読み込みが遅いと感じることは少ないかもしれないです。むしろ更新のしやすさや、プラグイン等を用いたカスタマイズのしやすさなどのメリットが多いかもしれません。
ただ、突き詰めてしまうと静的なHTMLファイルを読み込むことと比較すれば、サーバーの軽さという点では敵わないかと思います。
私の場合は、生業としてフロントエンドのコードを書く人間なので、Wordpressのメリットがあまり感じられなく、どちらかと言えばサーバー関連の心配を抑えたいと思っているため、静的サイト化を決めました。

ジェネレータ選定

静的サイトジェネレータはいくつか存在（staticsitegenerators.net）しますが、ぼくの知っている有名なものは下記などです。

このあたり詳しく調べるとキリがないので、選定においてはある程度スター数があるなどの信頼性と、あとは好みで良いと思うのですが、自分の場合は Node.js（Javascript）が実務で使っていて馴染みがある（いざとなったら対処も楽そう）という理由で、Hexoを選んでいます。
MarkDown方式で記事を書けるので、この部分も気に入ってます。

セットアップ

まずは動作させるために、Node.jsが必要になります。
今の制作環境では必須だし、Hexoで調べて来るような人は入っていて当然かと思いますが、まだの人がいたら過去記事なども参考にしてみて下さい。
【Mac】node.js のバージョン管理

次に、初めからnpm scriptsから実行となると面倒なので、下記コマンドにてグローバルにhexoをインストールしてしまいます。

1

$ npm install -g hexo-cli

インストールが完了したら、もう簡単にhexoプロジェクトを構築出来るようになっているので、ブログのプロジェクトフォルダに移動し、下記コマンドにてinitします。

1

$ hexo init myProject

構築が完了したらブログプロジェクトフォルダに移動し、必要モジュールのインストールを済ませます。

1
2

$ cs myProject
$ npm install

インストールすると、serverコマンドにて既にローカルサーバーが立ち上げられるようになっています。

1
2

$ hexo server
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

http://localhost:4000/ にアクセスすると確認出来るかと思います。
INFO のコメント通り Ctrl+C で停止させられます。

_confing.yml の設定

ブログプロジェクト直下に、_confing.yml ファイルがあるので開きます。

サイトの情報に関しては下記のように書きます。

1
2
3
4
5
6
7

# Site
title: ブログタイトル
subtitle: サブタイトル
description: ブログのディスクリプション
author: 著者
language: ja
timezone: Asia/Tokyo

URLは渡しの場合、リニューアル前のWordpress時の構造に近づけるため、下記のようにしています。

1
2
3
4
5
6

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://lab3-34.com/
root: /
permalink: :category/:title/
permalink_defaults:

記事の移行

WordpressからHexoに移行ということで、記事データをmigrateする必要がありました。
移行時の記事数がそこまで多かったわけではないですが、手動で記事ファイルを作り直しても手間なので、自動化できないかと方法を探した所、普通にできるみたいだったので、下記記事を参考にそのまま対応しました。

HexoにWordPressの記事をマイグレートする

wordpressからXMLをダウンロードする。

1. 使っているwordpressの管理画面にログインする
2. メニューのツール–>エクスポートよりXMLをダウンロードしてください。
3. ダウンロードしたファイルを、my-wp-migrateのフォルダに置きます。

Wordpress管理画面にログインし、XMLファイルとしてデータをエクスポート、
そのデータをブログプロジェクト直下に置き、

1
2
3
4

$ npm install --save-dev hexo-migrator-wordpress
...
...installed
$ hexo migrate wordpress <source>

hexo-migrator-wordpress をインストール、実行することで _post にデータが入っていると思います。
サーバーを立ち上げて確認したら、記事が確認できると思います。
画像や、ポスト名の調整などは先程のQiita投稿を参考にしたほうがわかりやすいかと思いますので、割愛します。

記事生成

移行した記事をHTMLとして生成するためには、generateコマンドを叩きます。
そうすると、public配下に生成された内容が格納されていると思います。

1

$ hexo generate

これで、public配下をサーバーにアップすれば公開完了です。
deployの設定をすると、github pagesやFTPからのアップが自動でできるようになりますが、長くなったので、また別の記事にまとめます。
とりあえず、これで念願のサイト静的化の完了です。