logoChibiham
cover
chibiham

chibiham home page

概要

ちびはむのプロフィール、ポートフォリオやブログ等を掲載し、エンジニアとしてのプレゼンスを上げるために開発・運用

アーキテクチャ

Notion image block
  • cloudflareでドメイン登録
  • Next.jsアプリで運用したかった点、フロント/バックエンド分離するつもりがなかったため、vercelを選択
    • githubと連携するだけでブランチごとの自動デプロイが構成される
    • グローバルCDN、自動スケーリング、モニタリング、DDoS対策、環境変数の管理など、運用機能も充実。Next.jsでのSSG, SSRに対応できる
    • これらの機能を有しながらも、無料枠が充実しており、よほどのPVがない限り無料で運用可能
      • かなり余裕がある
        • Notion image block
  • Notion (CMSとして使用)
    • 最も使いなれたメモアプリなので管理しやすいため
    • カスタマイズ性が高く、様々な機能を後から統合可能であり、APIの使用感を学習し、その他のインテグレーションも今後活用してみたかったため
  • Resend
    • メール送信PaaS。コンタクトフォームのメール送信に使用。シンプルな使い心地で、無料枠も十分あり

    • 技術スタック

  • Next.js
    • 静的なサイトとインタラクティブなサイトの両方を、SSGやSSRに対応することでユーザー体験とコストパフォーマンスよく提供できるため
    • フロントエンドとバックエンドを統合させつつ、Reactを使用したコンポーネントベースの開発が可能なため
    • 複雑なバックエンド処理は存在しないため、SSRとserver actionsを使用し、簡素な作りに留めています
  • Tailwind CSS
    • SSGに対応させたたかったため、また、Reactのコンポーネント開発においてデメリットの少ないユーティリティファーストなTailwindを選択

    • デザイン

    開発初期のデザイン検討として、figmaを使用。個人開発のためオンコードで調整した方が早い側面があるため細部には時間をかけていない

  • Gridデザインを適用した画面全体のレイアウトの調整 (約2h)
      Notion image block
  • 背景、ロゴ、アイコン画像の作成 (約2h)
      Notion image block
  • アイキャッチ画像はnijijourney (midjourney) で作成
  • ちびはむのアイコンは、手書きイラストをnijijourneyによるi2iで作成後、Photoshopで細部調整

    • 機能

  • Grid Designによるレスポンシブデザイン
    • Tailwind CSSのGridを使用し、レスポンシブデザインに対応
  • ダークモード対応
    • Tailwind CSSのダークモードのテーマを設定、各コンポーネントでダークモード使用時のcssを調整し対応
    • ブラウザの設定によってダークモードが適用される
  • 多言語対応
    • i18next, next-i18n-routerを使用して多言語化対応。詳細は記事参照
    • ※ CMS管理しているブログやポートフォリオまでは多言語対応していない
  • メール送信 （リッチテキストメール対応）
    • resend
    • メール送信はリッチテキストに対応
      • react-emailを使用し、reactを用いてリッチテキストのhtmlを生成
      • reactを使用しているため、フロントとほぼ同様の実装で多言語にも対応。ブラウザの設定が英語設定の場合は英語でメールが送信される
    • お問い合わせのメールを送信すると以下の画像のような内容確認メールが送信者に送信される
        Notion image block
  • NotionをCMSとして活用
    • デプロイ不要で記事の追加・編集を可能とした
    • NotionでBlog/ポートフォリオ記事一覧として作成した特定のデータベースにページを追加すると、ホームページのBlogページに追加される
        まだコンテンツが1つしかないがこのNotionのデータデータベースで管理されている（画像）
    • Next.js SSGを適用。キャッシュの保持期間は1日としているので、一度参照されたらNotionからの記事取得は1日行われない
    • Notion APIで取得した各Blockに対応するコンポーネントを一つ一つ用意している (ref: ブロック一覧)
      • claude 3.7 sonnetを活用し、APIの型に合わせたコンポーネントを生成、調整することでほぼ全てのブロックを約3hで実装した