学習し、自分なりに噛み砕いて、書き出すブログ。

個人の技術ブログをリニューアルした

個人の技術ブログ(今あなたが見ているブログ)をリニューアルしました。

見た目はそこまで変わっていないですが、内部はいろいろと構成を見直したり機能を追加したりしました。

システム構成の変更

以前は、Next.jsベースでブログを作り、microCMSから記事を入稿し、Vercelでホスティングしていました。その時のシステム構成はNext.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用するで書いています。

しかし、いくつか問題がありました。

  • 静的コンテンツが多いブログに対して、Next.jsがオーバースペック
  • CMSで管理したくなるほどコンテンツ管理が複雑化していない。やはりオーバースペック
  • Vercelにロックインされるのが、なんとなく嫌だった

そのため、現在はAstroで大部分のコンテンツをSSGするようにして、専用のリポジトリで記事を管理し、Cloudflare Workersでホスティングしています。

なおロックインという観点では、Cloudflareの機能にだいぶ依存しているので、依存先が変わっただけと言えます。ロックイン解消という観点では移行した意味がないですね。

いいねボタンの設置

noteのいいねボタンや、catnose’s notesの拍手ボタンに触発されて、読者が簡易的なフィードバックを送れる手段として設置しました。

最近はnoteで日々の心がけといった記事を書くことが増えています。noteはいいねの数がPV以外の指標として分かりやすく、記事が読まれている実感を得られる点が良いです。下衆な話をすれば、承認欲求が満たされるとも言います。

そういった体験を自分のブログでも得たくなったのが開発のきっかけでした。

いいねボタンの技術的な話

APIの実装にはAstroのServer Endpointsを使用しています。

GETリクエストはCache APIでキャッシュして、CloudflareのEdge and Browser Cache TTLのデフォルト値を適用しています。

キャッシュのinvalidationはPOSTリクエスト時の cache.delete() で実現していて、キャッシュヒット率向上のためにクエリパラメータを削除したURLをキーにしています。

POSTリクエストに対しては、Rate Limiting APIで一定のレートリミットもかけています。アクセス数は多くないので不要そうですが、攻撃対策として一応入れています。

いいね数はNeon上のデータベースに保存しています。Neonは無料枠の存在が嬉しいですが、もし無料枠がなくなったら移行するかもしれません。

またリクエストのバリデーションにValibotを使っています。Astroでは astro/z を介してZodが使えることをAstro v5へ更新したときに知りましたが、開発を一段落させることを優先してValibotをひとまず使うことにしました。

シェアボタンの設置

以前は、SNSの喧噪と距離を置くため意図的に設置していませんでした。

しかし、記事をより多くの人に見てほしいという欲が出てきたのでシェアボタンを設置しました。シェアボタンを設置することによって、すぐにシェアが増加して承認欲求が満たされてウハウハ!とはならないですが、まずは設置することが重要と考えました。

いろいろと試せる場があると楽しい

個人の技術ブログは自分の好きなようにできますし、やりたいことをやる気になったらすぐ試せます。いろいろあーでもないこーでもないと格闘できるのが楽しいです。

そういった場の存在を保つためにも、この個人の技術ブログを無くすことはないでしょう。


なお、実装がどうなっているのか見たい方は、ソースコードをkubosho/blog.kubosho.comに置いているので見てください。