Astroの404ページとリダイレクト設計：旧URLの受け止め方
Astroサイトのリニューアルで旧URLをどう受け止めるか。404ページの作り方と導線、astro.config の redirects と Cloudflare Pages の _redirects の使い分け、301と302の判断、旧URLの棚卸しと事故パターンまでを整理しました。
続きを読むAstro
12 件の記事
Astroのビルドを速く保つための見直しポイント：遅くなる前に見る場所を決める
Astro 5製のこのサイトのビルド（astro build＋Pagefind）を速く保つため、遅くなる前に見る場所を決めておくメモ。まず2段に分けて計る手順、画像最適化・ページ生成・インデックス・依存といった伸びやすい要因、効く対策とやらない方がいい対策を整理します。
続きを読むMarkdown記事のコードブロック運用メモ（Astro＋Shiki前提）
Astro標準のShikiでMarkdown記事のコードブロックを読みやすく保つための運用メモ。言語指定の徹底、長いコードの抜粋ルール、ファイル名表示と行ハイライトの方法、コピーボタンの考え方、ダークモードの2テーマ出力、モバイルでのはみ出し対策までを整理します。
続きを読むAstroサイトのE2EはPlaywrightの最小構成から
個人のAstroブログにPlaywrightのE2Eを入れる最小構成をまとめます。webServerでpreviewを自動起動する設定、最初に書くテスト3本の選び方、スクリーンショット回帰の始め方と割り切り、CIに載せる前のローカル運用までを扱います。
続きを読むAstroサイトのダークモード実装メモ：data属性＋CSS変数で切り替える
Astro＋Tailwind CSS 4のサイトで、data属性とCSS変数の差し替えによるダークモードを実装する手順をまとめました。メディア戦略との比較、head内のインラインスクリプトによるチラつき（FOUC）対策、localStorageの扱い、@custom-variant darkの記法、画像とコードブロックの対応まで。
続きを読むAstro＋Tailwind CSS 4の組み立て方（Viteプラグイン前提）
Astro 5にTailwind CSS 4を@tailwindcss/viteで組み込む手順を整理しました。v3との違い（tailwind.config.jsからCSSの@themeへ）、デザイントークンをCSS変数に寄せる設計、ダークモードの下準備まで含めた実践メモです。
続きを読むAstroでRSSとサイトマップを正しく出す
Astro 5で公式連携（@astrojs/rss・@astrojs/sitemap）を使い、RSSフィードとサイトマップを出す手順を整理します。下書き除外と日付順の並び替え、site設定の前提、サイトマップのfilterによる除外、フィードの全文配信と要約配信の判断、移行時にフィードURLを変えない注意までまとめました。
続きを読むAstroの画像最適化を標準の astro:assets に寄せる
Astro 5 の標準機能 astro:assets で画像を最適化する実践メモです。Image と Picture の使い分け、src と public の置き場の違い、widths の指定、リモート画像の許可設定、幅・高さの自動推定による CLS 対策までをまとめました。
続きを読むPagefindで静的サイトに検索を足す手順と注意点
Astro製の静的サイトにPagefindで全文検索を入れる手順をまとめました。ビルドへの組み込み方、`data-pagefind-body`などインデックス範囲の指定、検索ページ自体を除外する注意点、日本語検索の挙動まで、公式ドキュメントで確認した範囲で整理します。
続きを読むAstroのアイランドアーキテクチャ入門：なぜ配信JSが減るのか
Astroのアイランドアーキテクチャを、client:load / idle / visible / media / only の使い分けから解説します。デフォルトでJavaScriptを送らない仕組みと、このブログの構成を例にした判断の手順、付けすぎで失敗するパターンを整理しました。
続きを読むContent Collectionsの型でfrontmatterの事故を防ぐ
AstroのContent Collectionsで、ブログ記事のfrontmatterをZodスキーマで検証する実践メモ。slugの空欄、日付の形式ブレ、タグの表記ゆれといった事故パターンと、その防ぎ方、必須・デフォルト値・optionalの使い分け、astro checkの位置づけをまとめます。
続きを読むGatsbyからAstroへ移行した理由：判断軸の整理
2019年にGatsby 2系で作り、2020年で更新が止まったこのブログをAstro 5へ移した理由を整理します。JSの量、依存の保守、Markdown記事の運搬という3つの判断軸と、画像・GraphQL・URL維持など移行で実際に困る点をまとめました。
続きを読む