- Published on
タイトルの通り、個人ブログを作りました！
本当はプロフィールサイトを作るはずだったんですが、全くモチベーションが湧かなかったのでまずはブログ機能から始めた。
書きたいこと考える前にまず個人ブログ（プロフィールサイト）の技術スタックをまとめようと思います。
技術スタック概要
概要はこんな感じ
- Next.js ＋ TypeScript
- TailwindCSS
- Vercel
- microCMS
Next.js ＋ microCMS ＋ Vercel のよくありがちなザ・個人ブログな技術構成です。
Next.js ＋ TypeScript
Next.jsは本業でも使っていてとても開発体験がいい＋これからも使い続けたいので採用。
TailwindCSS
最初UIコンポーネントライブラリにはChakra UIを採用しましたが、本業でも使ってるので違うの使いたいなと思い始め急遽CSSフレームワークのTailwindCSSを採用。
まだ全然使いこなしていませんが、CSS弱者にも優しいので有難いです。。。大量のクラス名もVSCodeで補完が効くため、そこまでストレスにならなかった。
スタイリングはとりあえず下記からパクってきました！これから我を出していく
https://github.com/timlrx/tailwind-nextjs-starter-blog
Vercel
Next.jsを個人開発で使うならVercel一択のため音速で採用。
microCMS
初めて使ったけど、特にストレスなくいい感じ。
後述するOGP画像の自動生成の仕組み作りにも一役買ってくれた。
ちょっとしたこだわり
OGP画像の自動生成
せっかくブログ作るならSNSでツイートした時にいい感じに表示したいなと思った一番最初のこだわりポイント。
楽にできる方法ないかと思うと神記事があったので、ありがたく参考パクらせていただきました！！！
自分が調べた中では1番簡単にOGP画像の自動生成が実現できると思う。
imgixで動的画像・OGPを作成する
まだ一個しかないけど、これからちょっとずつこだわり機能を作っていきたい。
まとめ
せっかくブログ作ったので、これからたわいもないことを更新していきます！