ブログ作成の備忘録
このブログの制作に使った技術や詰まったポイントを備忘録としてまとめたいと思います。
1つの記事にまとめきれないので、何回かに分けてゆるーく書いていきます。
つかったもの
- Next.js
- ブログを作るために使ったJSフレームワーク。執筆時点ではv14.1.0を使用。App Routerで作りました。
- SSGを使って静的サイトとしてビルドしてます。
- TailwindCSS
- スタイルに使用。
- Storybook
- コンポーネントの確認に使用。
- microCMS
- ブログ記事の管理に使用。
- Cloudflare Page
- ブログを公開するために使ったプラットフォーム。
- Figma
- ワイヤーフレームやカンプを作るために使用……しようと思ってたけど結局雑なカラーシステムを作ったくらいでした。
- Affinity Design
- 一部のアイコンや画像を作るために使用。
基本的に使ってみたいものを使ったので、運用上のメリットなどはあまり気にしていません。
本当はちゃんと考えて構築していくのが良いですが、私は余計な考えが浮かぶと停止するタイプなので、手を動かすことを優先しました。
ブログを作って公開するまでの流れ
- デザインをもやもや考える。が、あまり実らず。
- Next.jsをインストールして、コンポーネントを作りながらデザインを構築していく。
- ある程度形になってちょっとテンションが上がる。
- テンションが高めの内に、Storybookを用意したり、microCMSとの連携を考えてブログの構築を進めていく。
- 公開できる状態になり、静的サイトをホスト先として評判の良いCloudflare Pagesにデプロイする。
うーん、我ながらグダグダですね😂
これからやってみたいこと
- デザインリニューアル
- ユニットテストの導入
- その他、技術的に興味ある事
デザインは既存プロダクトの良いところを研究して洗練させたいですね。
今のデザインは適当に作り過ぎた感が漂ってます。
次回以降は、ソースコードやIssueを見返しながら残しておきたい事柄をまとめていこうと思います。