Astro 5.x静的ブログ構築のベストプラクティス集。Islands Architecture、SSG、Content Layer API、画像最適化、ビルド最適化、SEOなど、パフォーマンスとUXを最大化するための公式推奨手法を提供。Astroコンポーネント/ページ作成時、Content Collections設定、画像最適化、クライアントディレクティブ選択、SEO実装時に使用。
How this skill is triggered — by the user, by Claude, or both
Slash command
/building-astro5-blogs:building-astro5-blogsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Astro 5.xを使用した静的ブログ構築における公式推奨のベストプラクティス。パフォーマンスとUXを最大化するための実装パターンを提供。
Astro 5.xを使用した静的ブログ構築における公式推奨のベストプラクティス。パフォーマンスとUXを最大化するための実装パターンを提供。
このスキルは、Astro 5.xでSSG(Static Site Generation)ブログを構築する際の最新ベストプラクティスを提供する。特に以下の点に焦点を当てる:
Astroの最大の強みはSSG。すべてのページをビルド時に静的生成し、JavaScriptは最小限に。
---
// ✅ 良い例: デフォルトで静的HTML
import { Image } from 'astro:assets';
import hero from '../assets/hero.png';
---
<article>
<h1>{title}</h1>
<Image src={hero} alt="Hero" />
<p>{content}</p>
</article>
インタラクティブ性が必要な部分だけJavaScriptを送信。
---
import CommentForm from '../components/CommentForm';
import ShareButtons from '../components/ShareButtons';
---
<!-- 静的コンテンツ: JavaScriptなし -->
<article>{content}</article>
<!-- アイランド1: ページロード時に必要 -->
<CommentForm client:load />
<!-- アイランド2: スクロールして表示されたら -->
<ShareButtons client:visible />
クライアントディレクティブの選択:
client:load - すぐに必要(ヘッダーメニュー、モーダル)client:visible - スクロール先にある(シェアボタン、コメント)client:idle - 優先度低い(チャットウィジェット、分析)client:media - 特定画面サイズ(モバイル専用メニュー)詳細は islands-architecture.md を参照。
Astro 5.0の新しいContent Layer APIを使用。
// src/content/config.ts
import { z, defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
const blog = defineCollection({
loader: glob({ pattern: '**/[^_]*.md', base: './src/blog' }),
schema: z.object({
title: z.string(),
pubDate: z.date(),
description: z.string(),
tags: z.array(z.string())
})
});
export const collections = { blog };
利点:
詳細は content-layer-api.md を参照。
src/content/config.tsを作成src/blog/に配置// src/pages/blog/index.astro - 記事一覧
const posts = await getCollection('blog');
// src/pages/blog/[slug].astro - 個別記事
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { slug: post.id },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await render(post);
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.png';
---
<!-- ヒーロー画像: 優先読み込み -->
<Image src={hero} alt="Hero" priority />
<!-- 記事内画像: レスポンシブ -->
<Image
src={image}
alt="..."
layout="constrained"
widths={[400, 800, 1200]}
/>
詳細は image-optimization.md を参照。
// astro.config.mjs
export default defineConfig({
// キャッシュディレクトリ
cacheDir: './node_modules/.astro',
});
重要:
詳細は build-optimization.md を参照。
// src/pages/rss.xml.js
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
const posts = await getCollection("blog");
return rss({
title: 'My Blog',
description: 'My blog description',
site: context.site,
items: posts.map((post) => ({
title: post.data.title,
pubDate: post.data.pubDate,
description: post.data.description,
link: `/blog/${post.id}/`,
})),
});
}
// astro.config.mjs
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap()],
});
詳細は seo-rss.md を参照。
// astro.config.mjs
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
export default defineConfig({
markdown: {
// Remarkプラグイン(Markdown AST処理)
remarkPlugins: [remarkGfm],
// Rehypeプラグイン(HTML AST処理)
rehypePlugins: [
rehypeSlug,
[rehypeAutolinkHeadings, { behavior: 'append' }]
],
},
});
よく使われるプラグイン:
remark-gfm: GitHub Flavored Markdownremark-toc: 目次自動生成rehype-slug: 見出しにID付与rehype-autolink-headings: アンカーリンク生成詳細は markdown-pipeline.md を参照。
client:loadは最小限(重要なUIのみ)client:visibleで遅延読み込み活用client:idleで優先度低いコンポーネントgetCollection()でフィルタリング<Image />コンポーネントを使用priority属性alt属性は必須<!-- 悪い例 -->
<Header client:load />
<Article client:load />
<Footer client:load />
問題: 大量のJavaScriptが送信され、パフォーマンス低下。
解決:
<!-- 良い例 -->
<Header /> <!-- 静的 -->
<Article /> <!-- 静的 -->
<Footer /> <!-- 静的 -->
<CommentForm client:visible /> <!-- 必要な部分だけ -->
<img>タグを使用<!-- 悪い例 -->
<img src="/images/photo.jpg" alt="Photo" />
問題: 最適化されず、パフォーマンス低下。
解決:
<!-- 良い例 -->
<Image src={photo} alt="Photo" />
---
// 悪い例
const posts = await getCollection('blog');
const authors = await getCollection('authors');
---
問題: 取得時間が合計される。
解決:
---
// 良い例
const [posts, authors] = await Promise.all([
getCollection('blog'),
getCollection('authors')
]);
---
詳細な実装パターンは以下のリファレンスを参照:
<Image />、<Picture />、レスポンシブ画像、getImage()Astro 5.0で導入された新しいコンテンツ管理システム。従来のContent Collectionsから移行する場合:
loaderプロパティを追加globローダーでファイルパターンを指定Astro 5.xでSSGブログを構築する際の核心原則:
これらを実践することで、高速でUXに優れたブログを構築できる。
npx claudepluginhub suntory-n-water/suntory-n-water-marketplace --plugin building-astro5-blogsBuilds content-focused websites with Astro's zero-JS islands architecture, multi-framework components (React/Vue/Svelte), and Markdown/MDX support. Triggers on .astro files, Astro.props, content collections.
Comprehensive best practices, routing patterns, component architecture, and static site generation techniques for building high-performance Astro websites.
Guides Astro rendering strategy decisions (SSG, SSR, hybrid), islands architecture with hydration directives, and content collections. Includes adapter configuration for Cloudflare and other platforms.