ブログ式年遷宮2023
2022 年末ごろから Next.js を触り始めたが、特に作りたいサイトもなかったので リニューアルした後また放置していたブログを作り直すことにした。
技術選定について
Next.js
選択理由
- React の学習も兼ねて
- 仕事で使う(かも)
作業中に静的サイトジェネレータの Astro が 2.0 になった。今回は Next.js の学習目的が強いので見送ったが、今後ますます流行っていきそうな気配は感じる
Tailwind CSS/MantineUI
選択理由
- CSS 自前で書くことがないが、こいつをどれだけ使えるか試す
- Tailwind CSS
クラス名の前に md をつけてレスポンシブ対応してみたり、グリッドの数をいじったり行きあたりばったりで準備したがそこそこは形になった。
ヘッダパーツと記事カードは MantineUI から選んだパーツをベースに作成。 基本的な使い方も触りながら確認し、とりあえず _app.tsx に MantineProvider の記載が必要なことは学習できた。
TailwindCSS でよく使うクラス 11 選！（幅・高さ・余白・パディングなど） | コードライク
【永久保存版】Tailwind CSS チートシート 3.x 対応 - SE の休日
Cloudflare Pages
選択理由
- Vercel 無料版では商用利用不可
- Google アドセンス乗っけてみたい
- Cloudflare の方を触ってみたかった
そんなにいろいろ作り込んでいないので、 Image コンポーネントが使えなくなるのでそこは image タグを使うようにするか、自前で準備する必要あり
やったこと
Next.js + Tailwind UI を使うとたった 6 時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
上記ブログを参考に Next.js のスターターキット(Typescript 版)をベースに作成
- MantineUI でヘッダと記事一覧表示のためのカード部分のパーツを作成
- Cloudflare Pages
- GoogleTagManeger を設置
残タスク
- [x] Google アナリティクス設置
- [ ] フッタの整備
- [ ] タグ機能
- [ ] タグ一覧ページの準備
- [ ] 記事ページに目次をつける
- [ ] ビルド成功時の slack 連携
- [ ] Google アドセンス設置
感想
以前のリニューアル時は、テンプレ導入後デザインやフォントを多少いじっただけだったが、今回は自分でせっせとパーツも作ったりしたのでだいぶ勉強になった。
特に TailwindCSS はダークモードにするのも config で一発、PC/SP のデザイン調整も比較的楽にできたのがよかったので、で引き続きいじっておきたい。