個人サイトをリニューアルしました
(更新日: )
はじめに
こんにちは。shibuです。
今回の記事では、僕の個人ブログがリニューアルされたことをお知らせします。今回のリニューアルでは、Denoを利用し、メンテナンスにかかる時間を抑えつつ構築しました。今回はそのリニューアルのポイントをご紹介したいと思います。
Denoの採用
リニューアルにあたり、Denoを利用しました。Denoを選んだ理由としては開発に必要なライブラリを減らして、メンテナンスにかかる時間を減らしたかったからです。DenoにはTypeScript、リント、フォーマッター、テストランナーなどが標準で含まれており、これらに対して追加でライブラリを利用する必要がありません。しばらく触らないとこのあたりのアップデートだけでけっこう時間がかかってしまうこともあり、開発頻度が低くなりがちな個人で開発するプロジェクトにはありがたい内容です。育児などで時間がなかなか取れない僕に取ってこのあたりはとても嬉しいポイントです。
また、フレームワークとしてはFreshを選択しました。特に比較検討したわけではなく、なんとなくDenoも推してそうだし使ってみようぐらいの感覚です。特に今のところ困るようなことは起こってないですが、困ったらPRとか出していきたいなという気持ちです。
CMSとしてmicroCMSを採用
コンテンツ管理には、microCMSを利用しています。これにより、記事の管理が容易になり、更新もスムーズに行えるようになりました。具体的には、記事となるPost、Postを分類するためのTag、サイトの部分的なコンテンツ(HomeやFooterの一部など)となるWidgetの3つのコンテンツを利用しています。これからAIを絡めたもアップデート も計画されていくみたいなので進化が楽しみです。
インフラ構成
CDNにAWS CloudFront、サーバーとしてはGCPのCloudRunを利用しています。なぜ別れてるの？っていうところですが、元々あったサイトがAWSのS3でホスティングしていたためです。そこから部分的に移行しており、そのままAWSのCloudFrontを使い続けている形です。
また、当初はDeno Deployを利用していましたが、CloudRunを利用するようにしました。理由としてはDeno Deploy環境ではnpm互換が利用できなかったためです。今のところ使えるようになったという話も聞かないので、利用できるようになったら再度Deno Deployを利用していきたいなと考えてます。
OGP画像生成にsatoriを利用
OGPの画像生成には、vercelのsatoriを利用しています。satoriはJSXで書いたものをSVGとして出力することができるライブラリです。そしてSVGからPNGに変換することでOGPの画像として出力しています。今のところ汎用的な画像しか出力していません。いずれブログの記事に合わせたものも出力するようにしたいと思ってます(一応ブログ記事用のものも作りはしたのですが、デザインが思いつかなかったので一旦やめました)。
まとめ
今回のブログリニューアルでは、省エネで運用していけるというところを意識して開発しています。zennとかでいいんじゃ？っていうのもあるのですが、技術に関すること以外も書いていきたい&遊ぶ場所がほしいというところで自分で作っています。
そしてこの記事はChatGPTの力を借りて作成してます。けっこう加筆してますが、大まかに書かれた記事をベースに作成することができたので、消費カロリー少なく作れて助かりました。今後もChatGPTの力も借りつつそこそこ投稿していけたらと思っています。
Appendix
このブログのリポジトリ: https://github.com/mya-ake/portfolio/