前回の更新から半年近く経ってしまいましたが、この度、当ブログをConohaVPS+WordPress→Netlify+Hugo(+GitHub)環境へ移行しました。
移行した理由
移行した一番の理由としては正直に言うとお金です。

移行前はホスティングサーバとしてConohaVPSを使用していたのですが、毎月1210円かかっていました。
(うち330円は自動バックアップオプションの料金だったので、正直不要でした。/(^o^)\ナンテコッタイ)
広告収入もほぼ無いに等しい(これは全然更新できていないので当たり前ですが)ので、サーバ代だけで約年間14520円もかかってしまっていました。 じゃあ頑張って広告収入をあげたいかというとあまりそういう気もおきないので、どうしようか悩んでいました。
そんなときWordPressからSSG(静的サイトジェネレータ)に移行し、静的コンテンツを公開できるサービス(Netlify、GitHub Pages等)を 利用すれば、VPSを契約しなくてもよさそうということで検討を始めました。
(無料ブログやXfree等無料レンタルサーバに移行することも考えたのですが、いろいろと自由がきかないのが嫌なのでやめました) (あとは単純に、なんか新しい技術っぽいし面白そうという理由もありました)
構成について
結論から先に言ってしまうと、大体以下のような構成になりました。

調べてみたところ、静的コンテンツのホスティングサーバにはNetlifyを使っているところが多く、料金も実質無料※、独自ドメイン、無料SSL対応ということでこれに決めました。 また、NetlifyはGitHubと連携し、GitHubに更新内容をプッシュするだけで自動的にデプロイすることができます。
SSGについては、Hugoにしました。こちらはGo言語で作成されているようで、用意されているテーマ数が多い、設定例が多い、よく見ているサイトでHugoが使われておりいい感じという点から決めました。
※無料プランは月に通信料が100GB、ビルド時間が300分までといった制限がありますが、10個程度の記事のビルド(+レイアウト調整のためのビルド数回)を しても通信料が1GB、ビルド時間が5分程度なので今のところ制限を超えることはなさそうです。
次にテーマですが、WordPressではSANGOというテーマを使っていました。 こちらのテーマは有料のテーマで、WordPressの大幅なアップデートにも追従するなど積極的なアップデートも行われており、いいテーマではあるのですが、当ブログのような内容だと少々おしゃれすぎて、内容とあまり合っていないことが気になっていました。(特にアイキャッチ画像を設定しなかったり、適当な画像にしたときに違和感があり、かといってアイキャッチをちゃんと毎回作るのも面倒すぎるんですよね…)
そのため、アイキャッチ画像が適当でもそんなに違和感がなく、かつそれなりに綺麗なデザインがよいということでHBS(Hugo Bootstrap Theme)を採用しました。
設定は公式のドキュメントを参考に設定しました。 ただいろいろとカスタマイズを行おうとすると、ドキュメントに記載されていない点もあったため結構設定に苦労しました。この辺は後日、時間のある&気が向いたときに別途記事に出来たらいいなと思っています。
他にはZzoやStackも候補で結構悩んだのですが、Zzoは他に使っている人が多そうだったのと、記事を表示したときのアニメーションがちょっと気になりました。Stackはブログ名を表示する場所がなさそうなのと、記事一覧でのアイキャッチ画像の形が特殊で、適当な画像に設定すると違和感が出てきそうなので今回は見送りました。(カスタマイズでなんとかなるのかもしれませんが)
また、WordPressとは違ってHugo単体ではお問い合わせ機能やコメント機能がないため、お問い合わせはNetlifyのフォーム機能、コメントはDisqusを利用しています。コメントについてはwordpress-to-hugo-exporterというWordPressからの移行用のプラグインがあるので、こちらを使用して移行しました。
移行前と移行後


WordPressからHugoに移行するメリットとして、ページを表示するときにDB処理を介さないため表示速度が改善されるということでGoogle PageSpeed Insightsでパフォーマンスを測定してみました。
移行前(WordPress)


移行後(Hugo)


携帯電話、PCからのアクセスについて、共にパフォーマンスが改善されていました。ヤッタネ!
(というか移行前のモバイルが酷すぎる😰🥶)
おわり
長年、レガシーな環境に身を置いているためGitHubを使ったことがなく、またGo言語なんてさっぱり分からん(というかプログラミング自体がシェルやperlで簡単なスクリプトが書けたり書けなかったりする程度)といった状態ですが、とりあえず移行することが出来ました。結構苦労しましたが、これに懲りずにいろいろなことに挑戦していきたいです。