N度目のリニューアル
もう何度目かわかりませんが、個人サイトをリニューアルしました。
元のサイトはこちらです（vercelにFreeでアップしているので、生き残ってはいる）。
本当は以前のサイトをもう少し継続して使用する予定だったんですが、色々とローカルでいじっていたらAstroがぶっ壊れてしまい、直すのも面倒なので作り直したという経緯です。
使用技術
- Remix
- Tailwind CSS / shadcn/ui
- Newt
- Cloudflare Pages
今回はこんな構成で作ってみました。Next.jsのAppRouterを使っても良かったのですが、Cloudflareを使ってみたかったので相性の良いRemixを採用した次第です。
Remix
かなりゴリゴリ書いてしまったので、正直Remixの開発体験がいいのか悪いのかはジャッジできません。リファクタリングしないといけない箇所がたくさんあるので、修正するなかでまた感想を書こうと思います。
Cloudflareとの相性という点ではセットアップ時にCloudflare Pagesへのデプロイを指定できるので、ここはめちゃくちゃ良かったですね。あとからちゃんと確認しましたが、npm scriptsでnpm run devをwranglerにリフレクトするような仕草もデフォルトで入っていたので、デプロイはかなりスムーズでした。
Newt
Astroでローカルがぶっ壊れたのはエラーメッセージ的におそらくMDXのパースと踏んでいたので、同じ轍を踏まぬように今回はCMSを使うことに。
microCMSを使っても良かったのですが、あえてNewtを使ってみました。なんとなくです。
CMSのエディタが個人的には好印象で、表示部分はNotionのようにいくつかのビューを選択でき、登録・編集部分では「絵文字」や「カラー」などの珍しいフォーム部品もありました。このブログでも絵文字をCMS側で登録して、それをブログ一覧に表示しています。
マイナス点としては2つあり、1つはモデルの定義の場所がわかりにくい & 設定変更後保存しなくてもアラートが出ないのでよく保存し忘れること。もう1つはSDKの使い方が微妙に分かりにくいことです。後者はある程度使っていけばわかるようになりますが、初見でGitHubのREADMEを見ただけでは、複雑なクエリの発行が難しかったです。
Cloudflare Pages
ずっと使おうと思って早数ヶ月、やっとことさ使うことができました。Pagesの方はNetlifyやVercelを使ったときの体験と大体同じなので割愛です。
今回ブログの動的OGP生成のためにCloudflare Pages functionsを使おうとしたのですが、結果として1MBの制限を超えられず使用を断念しました。
vercel/ogのcloudflare-pages版が出ていたのでそれを使った実装を考えていたのですが、おそらくvercel/og自体のバンドルサイズやらで容量制限に引っかかっていそうです。考えている過程はこちらを参照いただければと思います。
まあ固定でもいいっちゃいいんですが、時間がある時にまた対応しようと思います。
残タスク
とりあえず公開できるくらいにしましたが、まだまだ実装残があります。
- 記事移行
- 技術スタックのページをつくる
- アンカーリンクがページ移動するだけで、リンクが切り替わらない
- ブログ、登壇の動的OGP対応
- リンクカード対応
- ページネーション
まずは過去記事を移行しようと思っています。
おわりに
もともと記事しかなかった個人サイトもリニューアルするたびに機能が増えていっています。
前回の更新では登壇情報が増えましたが、今回は以下の機能が増えました。
- ブログのカテゴリわけとタブ表示
- 個人的なお知らせ機能
- 年ごとの登壇数集計
突然の移管は不本意でしたが、乗り換えることによって、自分の実装力の向上を図ることができ、結果として良かったかなと思っています。
とはいえ次は1年以上もつといいなあ…。
