こんにちは。Platformチームの飯迫 (@minato128)です。今回は、Tech Blogの移行について簡単に紹介したいと思います。

背景

キャディのTech Blogでは、これまでKistaのManaged WordPressを利用してきました。主な採用理由は、「カスタマイズ性の高さ、マネージドで安全に変更を反映できる仕組みがあること」でした。

実際、KinstaとWordPressはカスタマイズ性が高く、他社と差別化されたデザインを採用できたことはよかったのですが、下記のような課題がありました。

記事公開までの手順がシンプルではない*1
Production環境へのデプロイ（記事公開）に5~15分程度かかる
定額利用料とは別に、訪問数、ディスク容量、通信量でも追加課金が発生するため維持コストが高い

また、運用する中でWordPressほどのカスタマイズ性は必要ないこともわかってきました。そこで上記課題の解消のため、「より簡単に速く記事が投稿できるかつ定額制」のはてなブログに移行することにしました。

移行作業

移行作業のおおまかな流れは以下の通りです。

技術的な不確実性の調査
移行計画の作成
はてなブログ作成とデータ移行
はてなブログのテーマやCSS変更（デザイン調整）
Techメンバーをブログメンバーに追加して、元の記事のAuthorに、移行データの内容チェックを依頼
はてなブログの設定変更（ドメイン切り替え準備など）
はてなブログの運用資料整備
caddi.tech ドメインの切り替え
しばらく運用後、Kinsta/WordPressを削除

細部は実際とは異なりますが、おおまかなタイムラインはこのようになります。記事データのインポート後は、新しい記事データの重複管理が発生するのを避けるため、なるべく早く切り替えることを意識しました。*2 一方で、退職者の記事の一部が正しく表示できていないので、それは徐々に修正していければと考えています。

gantt
    title 移行タイムライン
    dateFormat YYYY-MM-DD

    section 移行担当（筆者）
    調査〜データ移行    :a1 ,2024-2-20 ,1d
    移行データの内容チェック依頼、その他準備作業    :a2 ,after a1 ,1d
    ドメイン切り替え :a3 ,2024-3-1 ,1h

    section デザイナー
    テーマやCSS変更    :b1 ,after a1 ,5d

    section Techメンバー
    移行データの内容チェックや修正    :c1 ,after a2 ,2w

はてなブログのデータインポート機能が優秀なので、大きな苦労はなかったのですが、一部自動インポートできない画像*3がありました。ちょっとした工夫として、画像移行用のCloudflare Workersを作成し、WordPressから公開用のR2 Bucketに画像を取り込めるようにしました。記事中で移行に失敗した画像*4のURLのHostをCloudflare Workersに書き換えると移行が終わるという仕組みです。はてなブログのAPIを使って一括書き換えもできたかもしれませんが、手動で直せる件数だったので各記事のAuthorに依頼して直していただきました。*5

help.hatenablog.com

また、移行後のちょっとした改善として、次のような取り組みをしました。まず、Google Analyticsで収集した情報をLookerで参照できるようにして展開しました。Authorが記事を公開後、どれくらい反響があったか継続的にみられるようになりました。

ブログメンバーは、当初Google Spread Sheetで台帳管理*6していました。ありがたいことに4月2日にTerraform Providerが公開されたため、早速GitHubでの管理に移行しました。*7

staff.hatenablog.com

今後は、GitHubで記事を管理したり、CIで textlint を実行したりすることで、さらに記事の質やブログの運用効率を上げたいと考えています。

移行して変わったこと

維持費が下がっただけでなく、開発者がより気軽に「記事を書いて、社内レビューを通して、公開する」ことができるようになりました。移行前の数ヶ月は1~2件記事が公開されればいい方でしたが、移行後の3月はひさびさの4件になりました。また、ホットエントリーや企業技術ブログ: エンジニアの技術ブログコミュニティへの掲載効果もあってか、以前よりはてなブックマーク数が伸び、より多くの方に記事を届けることができました。

CADDi ENGINEER Tech Blog[B!]新着記事・評価 - はてなブックマーク

移行後の社内の声を一部紹介します（フィードバックコメントをほぼそのまま転載）

「（切り替わって）やる気出てきたのでTech Blog書くぞ!!!」
「ひとつのUI内で執筆から公開まで完了するので、自分は投稿はめちゃ楽になったなと思いました！（前はWordPressで書いてKinstaのパッと見で分からないUI上でprodにポチポチデプロイする必要があったはず…あと、プレビューページを共有してレビューもらうのもやりやすかったです）」
「公開フローのドキュメントもあって、つまずくことなく公開できました。体感kinstaの時より簡単になった気がします！」
「公開後にちょっと直したい箇所とかもすぐに直して公開できるのがよい」
「今回初めて書いてみて詰まったり不便だと感じたところは特になく、リリースってこんなに簡単にできるんだ、と率直に思いました！」
「プレビューページの共有が簡単にできるのが良かったです」
「VSCodeで執筆したmarkdown(mermaidで書いた図も)がそのまま使えるのがよい」
「編集ページのpreview windowが優秀で実際の見た目を見ながら微調整できる(reloadもボタン1つ)のがよい」

編集長の hamada さんによると、まだたくさん公開予定の記事が控えているようです。今後のCADDi Tech Blogの更新にご期待ください！（ぜひSubscribeをお願いします！）

*1:WordPressだけでなく、KinstaのStagingとProduction環境構成や使い方を理解する必要がある

*2:移行データに多少の表示上の違いはあれど、情報の欠損がないとことがわかったため

*3:Pathの書き方やFile Format,Sizeなどが原因

*4:WordPressを参照している画像

*5:移行データの内容チェックを含め、協力いただいた社内のAuthorのみなさんに改めて感謝です

*6:Hatena IdとGoogle Workspace Id

*7:余談ですが、PlatformチームではSaaS IaC用のモノレポを管理しているので、あたらしいSaaSを簡単に追加できるようになっています