ブログをはてなブログProからHugoに戻しました

数年前はHugo+Netlifyを使ってブログを作っていましたが、何となくはてなブログProに移管していました。
結局またHugoに戻しAmplify Consoleでホスティングしたので、同じ轍を踏まないようメモを残しておこうと思います。

移植の目的

• ランニングコストを抑えたかった
• markdownで管理したかった
• 表示速度を上げたかった
• 将来的にオープンソースにしたい

それぞれ見てゆきます。

ランニングコストを抑えたかった

はてなブログでは、独自ドメインを使うためにはPro契約が必須です。
1,008円/月（二年契約では600円/月相当）と、なかなか良いお値段します。
Pro機能を十分に使って毎日更新しているならともかく、ほとんど使っていない状態だったので勿体なさを感じていました。
……なんで昔移植したんだ？

しかもHugoを始め、様々な選択肢も増えている状況です。
ということで、これが大きな理由となり移管しました。

ただし、はてなブログ自体のランキングやスター、購読機能は強力です。
この辺りに価値を感じる場合、移植は難しそうです。

markdownで管理したかった

はてなブログのエディタとダッシュボードは現代っ子のプログラマーには辛かったです。
間違って公開したり、保存し忘れたりという恐れと常に戦っていました。

Hugoのようにmarkdownで管理できると、grepでの記事横断検索や一斉置換も極めて容易です。
また、Githubにとりあえず上げておけば管理も容易であり、リンクも平易に書けます。

表示速度を上げたかった

大して気合が入っていないブログなので、せめて表示速度は上げないとお客様に失礼です（多分）。

はてなブログはAMP対応はずっとベータ、HTTP/2には対応しなさそう、という状況です。
基本的にアップデートは無く、枯れているのは良いのですが、新しい技術が使えないのも事実。
加えて、Netlifyの無料プランだとCDNに日本のエッジが無いので遅いというのは有名な話です。
結果、Hugoで静的サイトにし、AWS Amplify Consoleでホスティングすることにしました。

移植後PageSpeed Insightsのモバイルで見ると、トップページはスコアが35 -> 96と大幅に向上しました。
各ページのスコアはDisqusがブロックしている模様でトップほど劇的ではないですが、おおよそ10ポイントほど向上していました。

将来的にオープンソースにしたい

Webサイトで実装が難しいものとして、「記事の改変履歴」「購読機能」があると思います。
改変履歴は来訪者向けに公開されていれば安心できますが、Wordpressやはてなブログでは編集者向けの履歴しか用意されていません。
購読はなかなか難しく、はてなブログやQiitaのような確立したサービスでないと難しいのが現状です（メールで購読、ってなかなか押さないですよね）。

本サイトに絞って考えると、これらはサイト自体をGithubで公開することで満たせます。
もちろんGithubのアカウントが無いと購読できませんが、エンジニア向けブログ（を名乗っている）ので良いでしょう。

静的サイト + Amplify Consoleではリポジトリに匿名情報を入れる必要がないため、公開が容易です。
一応問題がないか確認のため「将来的に」と付けていますが、近いうちに公開する予定です。

その他手を抜く工夫

iframelyを使う

大してPVが無いので、カード型のリンクは全てiframelyに放り込んで描画してもらっています。
shortcodeにリンクを渡すだけの運用なのでカスタマイズ性は低いですが、お手軽で変更や列挙もしやすいです。

AddToAnyを使う

シェアボタンも自分で作ると面倒だったりする代物の一つです。
AddToAnyはリンクを貼るだけでいい感じにシェアボタンを生成してくれます。
なお、AddThisも試しましたが、AdBlockに弾かれるのでAddToAnyにしました。

cloudinaryを使う

これは元々行っていましたが、移植の際に改めて便利だと感じました。
画像はcloudinaryを利用し、そこへのリンクとして貼り付けます。
すると記事の制作方法が変わっても、画像に関しては何もする必要がありません。
ポータビリティが高いのでおすすめです。

今後やりたいこと

デザインの微調整

気が向いたらデザインを調整したいです。
特にiframelyのカードが凄く主張してくるので抑圧したいです。

オープンソース化

上述の通りです。

ちゃんと記事を上げる

何より大事ですね。

まとめ

PVが少なければ大概のことは気にしなくてよい