Day 24。自分のブログを作り直した。
今回は個人的なプロジェクトだ。n9o.xyzのブログは、自分で作ったテーマBlowfishを使ってHugoで何年も運用してきた。Blowfishは自分が作って、メンテナンスして、何千人もの人が使っている。でもずっと、別のものに移りたいと思っていた。新しいビジュアルアイデンティティ、違うスタック、「みんなのために作ったテーマ」ではなく、もっと自分らしいもの。
というわけで、今日のプロジェクトはReblog：n9o.xyzをゼロからリデザインし、HugoからAstro 5 + Tailwind CSSへ再構築した。
プロンプト#
これは一つのプロンプトではなかった。一日を通して18個のWatchfireタスクだった。最初の方向性はこんな感じ：
「Astro 5、Tailwind CSS、MDXで個人ブログを構築。ダークモード、注目記事、タグフィルタリング、あいまい検索、経歴ページ、音楽ページ、プロジェクトページ。Sora、Crimson Pro、JetBrains Monoでカスタムタイポグラフィ。」
そこから反復的なプロセスが始まった。レイアウトの調整、色の微調整、構造化データの追加、印刷スタイルの修正、マルチパートコンテンツのシリーズサポートの実装。通常ならデザインとコードの間で何週間もかかるような作業だ。
出来上がったもの#
6つの異なるセクションを持つ完全なブログプラットフォーム。
ホームページには、写真、タイトル、自己紹介、ソーシャルリンク付きのヒーローセクションがある。その下に大きなカードの注目記事セクション、そして最新記事のグリッド。クリーンで、中央寄せで、温かみがある。ダークモードは落ち着いたオリーブブラウンのパレットで、実際かなり気に入っている。よくあるダークグレーや真っ黒とは違う。
記事ページは上部にタグフィルタリングがある。タグをクリックすると、リストが即座にフィルタリングされる。ページリロードなし、サーバーへの往復なし。Astroがその力を発揮する。
あいまい検索はFuse.jsで実装。クライアントサイドで読み込まれ、タイトル、説明、タグを横断して検索する。これはほぼゼロJSのサイトの中で数少ないインタラクティブアイランドの一つだ。Astroのアイランドアーキテクチャにより、検索コンポーネントはページ全体にフレームワークを持ち込むことなく、単独でハイドレートされる。
アバウトページには自己紹介、リンク、メンタリングの案内がある。経歴ページにはキャリアの履歴が会社のロゴと役職の変遷と共にリストされている。どちらもクリーンで読みやすい。
プロジェクトページでは、ステータスバッジ、技術タグ、リポジトリやウェブサイトへのリンク付きでオープンソースの作品を紹介している。
音楽ページは、N9Oという名前でリリースしたトラックのアルバムアートのグリッドだ。それぞれがストリーミングプラットフォームにリンクしている。Hugo版では一度も作らなかった、ずっと欲しかったページだ。
ライトモード#
全体がシステム設定を検知してライトモードでも動作する。同じレイアウト、違うパレット。
ライト版は温かみのあるクリーム色の背景に同じタイポグラフィを使用。OSの設定に基づいて自動的に切り替わるが、手動でトグルすることもできる。
技術的な中身#
技術の選択は意図的だった：
- Astro 5 - デフォルトでゼロJSの静的生成
- MDX - ブログ記事用。必要に応じてマークダウンにコンポーネントを埋め込める
- Tailwind CSS - テーマのCSSと格闘せずにスタイリング
- Fuse.js - クライアントサイドのあいまい検索
- Sharp - 画像の自動最適化
- Sora + Crimson Pro + JetBrains Mono - 意図を感じるタイポグラフィ
- 構造化データとサイトマップ - SEO対策
- RSSフィード - まだRSSを使っている3人のために（自分もその一人）
- 印刷スタイル - 記事を印刷することもあるから、ちゃんと見えるべき
18個のタスク#
Watchfireはこれを18個のタスクに分解した。これまでで最も細かい分解だ。最初のバッチはコアをカバー：プロジェクトの雛形、レイアウトコンポーネント、ホームページ、記事ページ、アバウトページ、ダークモード。そこからリクエストを追加し続けた。「音楽ページを追加して」「シリーズサポートを追加して」「注目カードにもっとコントラストが必要」「印刷スタイルを追加して」「構造化データを追加して」
各イテレーションは速く戻ってきて、ほとんど正しかった。ビジュアルデザインは温かいパレットに落ち着くまで数回のラウンドを経た。最初のバージョンは無機質すぎた。2番目は暗すぎた。3番目のバージョンで、居心地の良さとプロフェッショナルさのバランスが取れた。
試してみて#
Day 24の感想#
これはチャレンジの中で最も個人的に意味のあるプロジェクトだ。技術的に最も印象的だからではなく、何ヶ月もずっと先延ばしにしていたことだから。自分のサイトのリデザインは、始めるほど緊急に感じられないタスクの一つだ。いつももっと重要なことがある。そしてある日それを見て、もう自分を表していないことに気づく。
6ページ、ダークモード、検索、タグフィルタリング、シリーズサポート、構造化データ、印刷スタイルを備えた完全なブログプラットフォームを一日で構築するのは、自分一人ではできなかったことだ。到底無理だった。Hugo/Blowfish版は夜と週末を何週間も費やしたし、それは自分が隅々まで知っているフレームワークでの話だ。
これが実際にn9o.xyzを置き換えることになるのか？たぶん。コンテンツを移行して、しばらく使ってみる必要がある。でも、一日で構築した動くものがすぐに使える状態にあるという事実は、なかなかすごいことだ。
これは30 Days of Vibe Codingの24日目です。AIアシスタントコーディングを使って30日間で30個のプロジェクトを出荷する様子をフォローしてください。
