このサイトをAstro + Keystaticで作り直した話
日英切り替え、Writeups、ダーク／ライトテーマを追加してサイトを全面改修しました。構成と、途中で決めたことの記録です。
自己紹介サイトを全面的に作り直しました。以前のサイトは1ページ構成で、コンテンツの一部がコードにハードコードされていたり、英語版のフィールドがあるのに表示されていなかったりと、育てにくい状態になっていました。
構成
- Astro：公開記事や趣味ページを静的に事前生成。CMSの管理用エンドポイントはサーバー側で処理
- Keystatic：YAMLとMarkdownをGitHub上で編集できるCMS
- Vercel：ホスティングとセキュリティヘッダー
Keystaticを選んだ理由は、コンテンツがリポジトリ内のファイルとして残ることです。CMSの管理画面から編集しても、結果はふつうのコミットになります。
日英切り替え
URLで言語を分けています。日本語が /、英語が /en/ です。コンテンツ側は description と description_en のように、同じエントリの中に両言語を持たせています。英語が空のときは日本語にフォールバックします。
Writeupsだけは本文がMarkdownなので、writeups/ja/ と writeups/en/ に分け、同じslugを持つ記事同士を言語切り替えでつないでいます。
動き
派手すぎない範囲で、いくつか動きを入れました。
- ヒーロー背景の、点と線がゆっくり動くネットワーク（
prefers-reduced-motionでは静止） - スクロールに合わせて要素が現れるリビール
- カードの上でカーソルを追うスポットライト
- ページ遷移のフェード
どれも小さなvanilla JSとCSSだけで、ライブラリは使っていません。
テーマ
OG画像に合わせて、ダークをデフォルトにしました。ライトテーマもあり、ヘッダーのボタンで切り替えられます。初回表示のちらつきを避けるため、テーマの判定は <head> で読み込む外部スクリプト theme-init.js で行っています。
作り直してみて、いちばん効いたのは「表示するものをCMS側で決められるようにした」ことでした。ハードコードを減らすと、サイトは育てやすくなります。