https://www.deepanshugautam.com/ja/notes/feed.xml 2026-11-07T00:00:00+09:00 Deepanshu Gautam https://www.deepanshugautam.com/ja/notes/rebuilding-my-website 2026-11-07T00:00:00+09:00 2026-11-07T00:00:00+09:00

deepanshugautam.comをサイトビルダーから移し、デザインシステム、2つの言語、デプロイゲートを備えたサイトにした理由。

<p>このサイトは長い間、サイトビルダー上の1ページでした。短い自己紹介と、アプリがひとつ、そしてApp Storeからリンクされているプライバシーポリシー。それで十分でしたが、<em>自分のもの</em>ではありませんでした。テストもバージョン管理も高速化もできず、変更はすべて他人のエディタでのクリック作業でした。</p> <p>そこで、プロダクトを作るのと同じやり方で作り直しました。</p> <h2>まずデザインシステムから</h2> <p>サイトはページではなくトークンから始まります。インドのサフラン、日本の朱色、昼は和紙、夜は墨というパレット、文字と余白のスケール、そしていくつかのコンポーネント。各機能は <code>--color-text</code> や <code>--color-japan-text</code> のような<em>役割</em>だけを使い、生の色コードを書くとビルドが失敗します。ライトモードとダークモードは自然に揃います。</p> <h2>ビルド時に、2つの言語でページを生成</h2> <p>すべてのページはビルド時に、言語ごとに素のHTMLとして生成されます。英語は <code>/</code>、日本語は <code>/ja</code> です。文章は言語ごとにひとつのYAMLファイルにまとまっていて、レンダラーはすべてをデフォルトでエスケープするので、翻訳がマークアップを壊すことはありません。検索エンジンには <code>hreflang</code> 付きの本物のHTMLを、訪問者にはJavaScriptが動く前から使えるページを届けます。</p> <h2>URLは約束</h2> <p>旧サイトには、App StoreからリンクされているBudget Buddyのプライバシーポリシーのように、他の人が頼りにしているURLがありました。それらはまったく同じアドレスのまま残し、ひとつでも消えればユニットテストが失敗するようにしています。</p> <h2>本番の前にゲートを</h2> <p>公開する前に、同じ高速チェックを手元とCloudflareの両方で実行します。Lint、型チェック、ユニットテスト、そしてコンテンツのチェック（翻訳漏れ、リンク切れ、古いアイコンやSNSカード）。ChromiumとiPhoneのWebKitでのブラウザテストでは、ライト・ダーク両方のアクセシビリティも含めて全ページを確認します。どれかが失敗すれば何も公開されず、最後の正常なバージョンが残ります。</p> <p>個人サイトには大げさな仕組みかもしれません。でも、こういう仕組みを作るのが好きですし、これで安心して改善を続けられます。**完璧じゃなくても、始めていい。**ただ、続けるならテストがあると心強いです。</p>