p4ni.

← すべての記事

#astro

  1. 比較

    CSP の nonce と hash:エッジで配る nonce は攻撃者のスクリプトにも付く

    静的サイトで nonce を使いたいなら Worker を前に置いて HTMLRewriter で注入せよ、というのが 定番の助言。実際に組んで計測したら、注入されたインラインスクリプトにも同じ nonce が付き、 そのまま実行された。

  2. チュートリアル

    Satori で日本語の OG 画像:5MB のフォントはどこにも配信されない

    Satori は渡したフォントに無いグリフを、警告も出さず NO GLYPH の箱に置き換える。 Noto Sans JP を積むときのサイズ・ウェイト・レイアウトの実測値と、ビルド時生成なら サブセットに手を出さなくていい理由。

  3. 比較

    Astro × Cloudflare の CMS 選び: Git ベースか、ヘッドレスか、そもそも無しか

    Cloudflare Workers 上の静的 Astro サイトで CMS を選ぶ基準は「コンテンツがどこに住み、何がビルドを起動するか」に尽きます。content collections・Git ベース CMS・ホステッド型・D1 自作の4択を、実際に運用している構成から比較します。

  4. チュートリアル

    Astro を2言語にする:プラグイン無し、content collections だけ

    このブログに日本語を足したときの設計を全部書きます。1つのコレクションにロケール別フォルダ、slug で翻訳をペアにし、hreflang と型付きの UI 辞書まで。i18n プラグインもライブラリも使っていません。

  5. チュートリアル

    Astro サイトに llms.txt を置く(手書きせず生成する)

    llms.txt と llms-full.txt を Astro の content collections から生成し、古くなりようのない形で配信します。エンドポイントのコード付き。そもそも読んでいるものはいるのか、についても正直に書きます。

  6. チュートリアル

    静的な Astro サイトでブログ記事を予約公開する

    サーバーも CMS も有料サービスも無しで、pubDate のフィルタと GitHub Actions の日次リビルドだけで予約公開を実現します。最初に必ず踏むタイムゾーンの罠も込みで。

  7. チュートリアル

    静的サイトに nonce は使えない: Astro + Cloudflare Workers の CSP

    リクエストごとの nonce を発行できない以上、インラインスクリプトは hash で通すしかありません。ビルド出力のインライン script はページ数と同じだけ増えていきますが、必要な hash は3個で固定でした。その差を作っているのが、多くの CSP 解説が取り違えている一点です。

  8. 開発の記録

    Astro 7 のエージェント検出:何が引き金になり、何が壊れるか

    Astro 7 は AI コーディングエージェントを検出すると astro dev をバックグラウンドに回します。実際の引き金は何か、JSON ログの中身は本当に構造化されているのか、そして切り方をまとめます。

  9. 比較

    Astro と Next.js、コンテンツサイトにはどちらか(2026年版)

    それぞれが既定で何を送ってくるかを測りました。645バイト対 642 kB。この差がブログ・ドキュメント・ ディレクトリにとって何を意味するのか、そして今でも Next.js を選ぶ場面はどこかをまとめます。

  10. チュートリアル

    Astro の構造化データ: 2026年に Google がまだ読む JSON-LD

    FAQ リッチリザルトは2026年5月に消え、HowTo は2023年に廃止されました。いま書く価値のある型と、Astro の content collections から出力する方法をまとめます。

  11. チュートリアル

    Astro と Satori で OG 画像を自動生成する

    記事ごとに 1200x630 の OG 画像を、ヘッドレスブラウザなし・実行時コストなしでビルド時に作ります。Astro + Satori の設定一式と、フォントで必ず引っかかる罠まで。

  12. 開発の記録

    Astro のウェブフォントで LCP を直す(PageSpeed 83 → 99)

    スタイルシートのインライン化はすぐ効きました。本当の問題はその先で、レイアウトシフトを隠す preload では LCP は動かず、効いたのはフォントメトリクスの上書きでした。

  13. 比較

    Astro のディレクトリテーマ比較(2026年版)

    無料の Markdown スターターか、管理画面付きのデータベース連携テーマか。使う価値のある Astro ディレクトリテーマを並べて、データ層の選び方から整理します。

  14. チュートリアル

    Astro を Cloudflare Workers にデプロイする(2026年版)

    Cloudflare は新規プロジェクトの推奨先を Pages から Workers に切り替えました。静的な Astro サイトを Workers に載せる今のやり方を、独自ドメインの接続まで通しでまとめます。