kikuta.dev

Astroの静的出力を配布単位にする

Astroのstatic outputでHTMLを生成し、Cloudflare Pagesへdistディレクトリを配布します。アプリserverを本番要件にせず、記事・Project・sitemap・robotsまでbuild時に確定させています。

記事とProjectはAstro Content CollectionsをSource of Truthとし、Projectタグ、関連記事、series、sitemap、OG生成を同じmetadataから組み立てます。本文とmetadataを旧来の大きなTypeScript配列へ混在させず、1ページ1Markdownへ分離しています。

ターミナルを見た目だけにしない

PCのProjects画面は左にサムネイル付き一覧、右に選択中Projectの詳細本文を置くmaster-detail構成です。Notesも同じ操作モデルで、左の記事一覧から右の本文を切り替えます。カーソルを↑↓で動かすとURLと詳細が同時に切り替わり、クリックでも同じ状態へ到達します。HomeはProjectカードとDevelopment Notesを直接並べ、説明文ではなくコンテンツ自体を入口にしています。

内部的には各ProjectとArticleがそれぞれ /projects/、/articles/ の静的ページとして存在するため、JavaScriptが使えない場合でも通常のリンクとして読めます。JavaScriptはclient-side navigation、上部タブの←→操作、Project/Notesの選択状態だけに使います。

deploy完了と公開確認を分ける

Cloudflare Pagesへのupload成功だけで公開完了とは扱いません。build後の静的HTMLをSEO verifierで検査し、deploy後はkikuta.devの実URLから変更した本文・導線が返るところまで確認します。

canonical、JSON-LD、sitemap、robots、Open Graphも同じContent Collectionsから生成し、content追加時にURL一覧やmetadataを別管理しない構成にしています。