Modern Architecture of 8091.info
Astro × Astrowind で再設計された高速ブログ
8091.info は、WordPress から最新の Astro + Astrowind テーマへ完全移行し、View Transitions、Pagefind 検索、Sharp 画像最適化、GitHub Actions × Hostinger 自動デプロイを採用したモダンWebアーキテクチャで運用しています。
採用している技術スタック
Astro v5 + Astrowind を中核に、速度・UX・運用効率を最大化する構成です。
Astro v5 + Astrowind
アイランドアーキテクチャで初回表示を最小化。Astrowindのデザインシステムで一貫性と可読性を両立。
Tailwind CSS
ユーティリティファーストで高速にUI構築。プリセットでテーマと調和するスタイルを適用。
View Transitions API
ページ間のスムーズな遷移を実装。読みやすさを妨げない軽量アニメーション設計。
Pagefind 検索
クライアントサイド検索で高速レスポンス。ビルド時にインデックス生成し配信コストを最小化。
Sharp 画像最適化
WebP/AVIF を自動生成し、画質を保ちながら転送量を削減。レスポンシブ画像に対応。
Node.js v22 + ESM
最新の Node v22.18.0 で安定運用。ES Modules を前提にビルドとツールを最適化。
パフォーマンスとUXの最適化
Core Web Vitals Green を目標に、計測と改善を継続しています。
初回表示 < 3秒を目標
SSRと静的配信の併用で初動を高速化。不要JSを削減し、重要リソースを優先読み込み。
ビルド ~53秒
GitHub Actions で高速ビルド。サイズと依存関係を継続的に監視し、無駄を削減。
画像最適化 & レスポンシブ
Sharp による WebP/AVIF 生成と適切な srcset でデバイス毎に最適化。
Pagefind 高速検索
静的インデックスでクライアント検索を実装。ネットワーク負荷が軽く、即時に検索可能。
View Transitions
ナビゲーションの文脈を保つスムーズな遷移。可読性を損なわない強度に調整。
SEO/構造化データ
フロントマター標準化・OG画像自動生成・構造化データ整備で検索性を強化。
CI/CD と運用フロー
セミトランクベース開発（preview/main）で、少ない手順で確実にデプロイします。
- 1
previewで検証
日常作業は preview ブランチで実施し、自動で https://preview.8091.info にデプロイ。表示・性能を確認。
- 2
mainへ反映
検証後に main へマージし、本番 https://8091.info へ自動デプロイ。Hostinger の Git Auto-Deploy を使用。
- 3
自動メンテナンス
GitHub Actions が毎日 12:15 JST に PA-API キャッシュを更新し、差分のみ PR を作成。
移行実績とコンテンツ基盤
WordPress からの完全移行により、保守性と配信効率を大幅に改善しました。
66記事の完全移行
HTML→Markdown 変換の自動化とクリーニングを実施。スラグ・カテゴリ・タグ・メタデータを継承。
Frontmatter 標準化
publishDate/excerpt/draft を統一し、SEO/OG の自動最適化と Content Collections を整備。
AI 駆動ワークフロー
Gemini CLI で記事生成→人手校正→Claude で技術レビュー。週5更新の運用に対応。
Resources
関連リンクとリソース
Contact & Policy
お問い合わせとポリシー
ご質問・ご要望はお問い合わせフォームよりお気軽にお寄せください。技術的な指摘も歓迎します。
プライバシーポリシーで個人情報の取り扱いについてご確認いただけます。