概要
ポートフォリオサイトにブログ機能を追加しました！！
やっと個人サイトっぽくなってきました、過去の記事等も移管予定です！
追加した機能
記事一覧ページ
- 記事をカード形式で一覧表示
- 投稿日・記事タイプ・読了時間・タグを表示
- サイドバーに外部ブログへのリンク（Qiita、SO Technologies 開発者ブログ）を配置
記事詳細ページ
- Markdownをそのままレンダリング
- 見出し・リスト・テーブル・コードブロック・引用など、一般的なMarkdown記法に対応
- Qiita風の
:::note infoブロックに対応（情報・警告・エラーの3タイプ） - 記事内のURLを自動でリンクカードとして表示
- ページ下部に他の記事へのリンクを表示
Aboutページとの連携
トップページ（About）に直近の記事を「Latest Posts」として表示するようにしました。サイトを訪れた方がすぐに最新の投稿を確認できます。
技術的な話
react-markdown+remark-gfmでMarkdownレンダリング- Viteの
import.meta.globでビルド時に全記事を読み込み - frontmatterのパースは外部ライブラリを使わず、正規表現ベースの自前実装
- 読了時間は本文の文字数から自動算出（約500文字/分）
CMS やデータベースは使わず、Markdownファイルを追加するだけで記事を公開できるシンプルな構成にしています。