Astroで作る — 投稿一覧と詳細ページ

入門約15分最終更新 2026-08-28 Astro 5

このガイドでは、Astro の静的生成（SSG）で「お知らせ一覧」と「お知らせ詳細」の2ページを作ります。ビルド時に公開APIを呼び、投稿の更新は Webhook からの再ビルドで反映する構成です。

前提：APIキーとサイトコードを取得済みで、クイックスタートのステップ2まで完了していること。

1. クライアントを1か所で作る

SDKクライアントは src/lib/cms.ts に1つだけ作り、各ページから import します。APIキーは環境変数から読みます。

src/lib/cms.ts

import { ShareDanCmsClient } from '@sharedan/cms-sdk';

export const cms = new ShareDanCmsClient({
  baseUrl: 'https://api.cms.sharedan.co.jp',
  apiKey: import.meta.env.CMS_API_KEY,
  siteCode: import.meta.env.CMS_SITE_CODE,
});

2. 一覧ページ

一覧のレスポンスには本文（body）は含まれないため、軽量です。上部固定の投稿は pinned: true で先頭に来ます。

src/pages/news/index.astro

---
import { cms } from '../../lib/cms';
const { items } = await cms.posts.list('news', {
  perPage: 20,
});
---
<ul>
  {items.map((p) => (
    <li>
      <a href={`/news/${p.slug}`}>{p.title}</a>
      <small>{p.category.name}</small>
    </li>
  ))}
</ul>

多言語（オプション）：多言語オプションを有効にしたサイトでは、posts.list() / posts.get() に localeを渡すと言語別の公開版を取得でき、ビルド時に言語別ページとして焼けます。未翻訳は原文へフォールバックします。詳しくは多言語サイトを作るを参照してください。

3. 詳細ページ（動的ルート）

getStaticPaths で全スラッグを列挙し、本文は renderProseMirror() でHTML化して set:html で差し込みます。

src/pages/news/[slug].astro

---
import { cms } from '../../lib/cms';
import { renderProseMirror } from '@sharedan/cms-sdk';

export async function getStaticPaths() {
  const { items } = await cms.posts.list('news', { perPage: 100 });
  return items.map((p) => ({ params: { slug: p.slug } }));
}

const post = await cms.posts.get('news', Astro.params.slug!);
const html = renderProseMirror(post.body);
---
<article>
  <h1>{post.title}</h1>
  <div set:html={html} />
</article>

投稿が100件を超える場合は page でページングしてください。1リクエストの上限（per_page）は100件です。

4. 更新を反映する

SSG なので、投稿の公開・更新時に再ビルドが必要です。管理画面の「サイト設定 › 外部連携」で Webhook または GitHub Actions を有効にすると、次のイベントで通知されます。

イベント発生タイミング

post.published 投稿の公開・予約公開の実行時

post.updated 公開済み投稿の本文・メタ情報の更新時

faq.updated FAQの追加・更新・並び替え時

content.updated 固定コンテンツの更新時

ヒント：更新頻度が高いサイトは、一覧だけ SSR（export const prerender = false）にするハイブリッド構成も選べます。公開APIの応答は 20ms 前後です。

FEEDBACK

このページはお役に立ちましたか？

改善要望・不具合・ドキュメントの分かりにくい点など、お気軽にお寄せください。いただいた内容は今後の改善に役立てます。