はてなブログからGhostに移行した

タイトルにあるとおり、ブログプラットフォームをはてなブログからGhostに移行した。ブログページの読み込みが遅いと感じたので。

GoogleのLighthouseで計測してみたら、こんな感じだった。

トップ画面	記事画面

Performanceが赤点。カスタムスクリプトを自前でゴテゴテ追加しているわけでは無いので、デフォルトでこんな状態なんじゃないかなと思う。『Reduce unused JavaScript』って怒られてる。

移行後のGhostで同様に計測してみると、こんな感じ。

トップ画面	記事画面

『Eliminate render-blocking resources』ってのでGoogle FontsによるWebフォントの読み込み辺りで指摘を食らってるけど、スコア自体は良い感じ。

Ghostに移行したことで以下の機能を失ったので、その分軽量化された面も大きいと思う。これら機能が不要であれば、パフォーマンスを改善できる可能性があるので、別のプラットフォームに移ることも検討して良さそう（上記は、後述するSimple Analytics・Commentoを導入した上でのスコア）。

はてな関連サービスとの連携（はてなスター、ブロググループ、読者機能…）
ビルトインのブログ記事検索システム

僕自身は、これらは別にあってもなくてもどちらでも良い感じだったし、パフォーマンス悪いなーってのが気になってたので、新年度を機に環境を一新した。

Ghostへの移行

Ghostは、オープンソースでブログシステムが公開されているので、Developer docsを参考に自前でホスティングできる。あるいはGhost (Pro)というSaaSをSubscribeすれば、メンテナンスの負担なく、記事執筆に専念できる。

僕自身、過去にVPSを借りてセルフホスティングでGhostを運用してみたことがあるが、Ghostは割と頻繁にアップデートされ、バージョンの追従が割と大変なこと、また記事に画像を添付していくことを考えると、長期的にはストレージ容量の多い、上位のVPSに切り替えていかないといけないかもなと考えたりして、結局利用を継続できなかった。

そのため、今回はGhost (Pro)を契約し、システムの運用はGhost側に任せることにした。

Ghost (Pro)にはMembersという仕組みがあり、読者購読によって最新記事の公開を通知したり、有料読者向けの限定記事を配信したりといったことが可能である。SubscriptionのプランはStarter・Creatorなどの選択肢があるが、記事執筆者の人数や1ファイル辺りのアップロードサイズ上限、ブログテーマをどこまで拘るかによって選ぶことになる。また、Starterプランは1,000人までしかブログ購読者を抱えられないので、この上限に到達するような場合は、より上位のCreatorプランへの移行を検討する必要が生じる。Membersの上限に応じて、Subscriptionの金額も上がっていく。

僕自身はStarterプランで契約した。その上で、特に必要ではなかったので、管理画面にてMembers機能を無効化した。年間払い（Annual discount）で108ドル。月額換算で9ドル。Annual discountをオフにして月々払いにした場合は、月11ドル、年あたり132ドルとなる。14日間の試用期間が用意されているので、使い勝手などをしっかりと調べておくと良い。

契約後は、管理画面からブログの各種設定（Title & description, Timezone, Publication Language等々）やデザインの設定を済ませ、はてなフォトライフから記事に添付した画像を取ってきて、記事の移行を済ませた。記事URLの都合からリダイレクトを設定したい場合は、Ghostの管理画面から取得できる redirects.yaml に リダイレクト元: リダイレクト先 のように書いていって、編集後のファイルを再度アップロードすれば済んだ（ redirects.json とJSONファイルでダウンロードされたが、YAMLで書きたい場合は、拡張子を変えてYAMLで書けば良い）。Developer docsにもリダイレクト設定に関する説明がある。

カスタムドメインの設定については、管理画面の Ghost(Pro) から設定できた。こちらも設定方法のドキュメントが整備されているので、困ることは無いはず。

Analyticsとコメントシステムの導入

GhostにはAnalyticsや記事検索システム、コメントシステムがビルトインされていない。これらが必要であれば、どこかのサービスのものを導入する必要がある。

ブログ管理画面の設定からIntegrationsを見に行くと、Ghostがサポートしている3rd partyの各種サービスを確認できる。記事検索に関しては、ブログ内で記事を検索する必要性を感じなかったので、ひとまず導入を見送った（わざわざブログ内に機能を組み込まずとも、Googleとかの検索エンジンで検索してもらえば良さそう）。Analyticsとコメントシステムについても、まぁ無くても困りはしないが、せっかくなので導入することにした。

Analyticsとしてまず候補に挙がるのはGoogle Analyticsだが、ブログ記事を閲覧してくれたユーザの属性をカテゴライズし、行動を分析し、マネタイズに繋げる云々…というのは興味が無いし、それを実現するためのスクリプトでブログの動作が重くなるのはご免なので、Simple Analyticsを導入した。

Starter, Business, Enterpriseと三つあるうちのStarterプランを選んだ。年額108ドル、月あたり9ドル。ドキュメントを参考にすれば、パパッとGhostに導入できる。

コメントシステムはDisqusを考えていたが、少し前に広告テクノロジー系の企業に買収され、広告やトラッカーが混ぜ込まれるようになったようなので、候補から外した。ドキュメントでも以下のようにNoteが記載されている。

Note: While Disqus is free, it was acquired by an ad-tech company in 2017 and may inject advertising and ad-trackers on your site.

GhostのMembersは使用しないので、これをベースとするCove Commentsも使えない。DiscourseのSaaSはEnterprise向けの月100ドルからのプラン構成でターゲット層から外れており、またDiscourse自体のシステムもオープンソースで提供されているものの、セルフホスティングするのは本末転倒なので、これも候補から外れた。

どないしよっかなと悩んだけど、最終的にはGhost integrationsにはリストアップされていない、Commentoを導入した。

選ぶにあたり、このあたりの記事を参考にした。

年額99ドル。『良いサービスには、しっかりお金を払おう』ということで。

Ghostにコメントシステムを導入するのは、少し面倒。Ghostの管理画面のDesignを開き、左下の Change theme でテーマ切り替えの画面を開く。右上の Advanced でアコーディオンを開き、使用中のテーマ右端のドットから Download を選んでテーマを手元に落としてくる。

テーマを落としてきたら、ドキュメントを参考に記事ページのテンプレートファイルに対応する post.hbs を探し出し、コメントシステムのスクリプトを入れるに適切な場所を探す。テーマによってはコメント用のhbsを切り出して管理してたりするので、テーマの実装をよく読む必要がある。コメントシステムのスクリプトを組み込んだら、テーマファイルをZIPで固めて、Ghost管理画面 Designの Change theme を開いた際に右上に出ている Upload theme でこれをアップロードすれば良い。

ブログのパフォーマンスを良くしたいという思いから、はてなブログからGhostに移行し、Analyticsとコメントシステムも組み込んだ。Ghost・Simple Analytics・CommentoでそれぞれSubscribeするので費用はなかなか高く付くけど、ブログを見てくださる方にとっては、快適な環境になったかなと思う。まぁ、ほとんど自己満足だけど。