リモートという環境とインドア派の性格も相まって完全運動不足。
どうも、

約 2 日かけてブログのリニューアルをしました！🎉 （わーい
今回のリニューアル内容とか変更点とか、自分の頭の中を整理しつつ書いていきます！

構成

今回のリニューアル、リポジトリからまるごと全部作り替えているので、構成から説明していこうかと思います。

リニューアル前の構成

• Next.js
• GraphQL
• Prisma
• PlanetScale
• MUI

フロントエンド

フレームワークはNext.js。
作成時にちょうどNext.jsを使う仕事が来た為採用。
UI はデザインに時間を使いたくないという思いもあり、コンポーネントが揃っているMUIを採用。

API

API はNext.jsのAPI RoutesにApollo Serverを乗っけてGraphQLを使いました。
過去にGatsby.jsを使用してブログを作ったことがあり、そのときにGraphQLの体験が良かったので採用しました。

バックエンド

バックエンドはPrismaとPlanetScale。
Typescriptを採用していたこともあり、型付け最強のPrismaを採用。
最初は DB サーバー立ててましたが、コストとPrismaのマイグレーション機能をもっと効率良く出来なかなと考えて、
Prisma Data PlatformとPlanetScaleに乗り換えました。

これが、リニューアル前のブログの構成です。

このブログは記事を書くことを目的として作成していましたが、
実験できる場としても使っていた為、ただのブログなのにごちゃごちゃした構成となっていました。

リニューアル後

• Next.js
• MDX
• TailwindCSS

フロントエンド

Next.jsからRemixへの変更も考えましたが、今後仕事で使えるノウハウを貯める為にも、採用されるか分からないRemixは今回は見送りました。
（といいつつRemixは触ってみたかったので、別のサービス作成時に使ってみたので、後日記事にできればと思います！）

デザインは今までMUIを採用していましたが、そのまま使用するとMUIの色が強すぎる為今回はパスしました。
デザインの調整に時間がかかること、さらには僕がCSSの知識もあることから何を組み合わせたらどうなるかを把握している為、TailwindCSSを採用しました。
実はTailwindCSSは食わず嫌いをしていて、Bootstrapの雰囲気があるため避けていました。
今回使ってみて、使いやすすぎた為今後は候補に入れていこうと思ってます。（人気なものには理由があるんですね！

API

今回はGraphQLを剥がしたので、API は基本使っていません。（OGP 画像の生成とかだけ）

バックエンド

PlanetScaleから使わないなら停止するぞと通知がくるので、特に変更しなくても再ビルドかけて記事データを読みに行かせたりしてたのでめんどくさくなり、
再度 DB って必要か？と考えたところ、管理するコストを考えて Git で記事を管理してしまえという事になり、PrismaとPlanetScaleを辞める事にしました。

リニューアル後は DB をとっぱらい、フロントのみでほぼ完結する構成になったのでメンテナンスコストを大幅に削ることができ、
長い間放置しても怒られないようになりました！（最高

今回のリニューアルポイント

Timeline

お気に入りのタイムライン機能です！
今までまっさらな TOP でしたが、

• Code Lab Blog
• Zenn
• Qiita
• リリースしたサービス？Web アプリ？の GitHub のリリース情報

を RSS から引っ張ってきて表示するようにしました！
今後、プロフィール的にも使えるように経歴とかなんかも載せられるようにしたいと思っています。
経歴 RSS ってなんか面白いですよね w

目次

ずっと欲しかった目次です！
今回のリニューアルで一番時間かかったかも…
この辺りも記事にしてみたいな

余談ですが、もくじで変換しても目次が出てきません…

絵文字を使って画像がなくても楽しい感じに！

わかる人にはわかる。Zenn のパクリです。
サムネとか作るの大変だけど…無いとすっからかんだし…
って事でパクりました。

GitHub をオープンに！

今までのブログは非公開で管理していたのですが、今回からは記事も含めて全て GitHub で管理しています。
オープンにしたからと言って特に何が変わるわけでも無いのですが、オープンなプロジェクトあるとコード書いてる感があるかなと思って…

まとめ

今回の収穫はTailwindCSSが最高ってことがわかった！

以上