知識ゼロから始めるAstroブログ構築(2) ～Astroでとりあえず記事とインデックスページを表示させる～

Astroで最小構成の状態で、まずは記事と記事一覧のページが表示されるように設定していきます。まずは動くことを目標に、デザインなどは特段ない状態でやっていきます。

astroで最低限、記事と記事一覧ページが表示されるように設定#

astroのconfig.tsを設定#

VS Codeでastroをインストールしたフォルダを開きます。

vscodeで開いた様子

srcフォルダの中に、contentフォルダを作成し、config.tsファイルを作成し、以下をコピペします。

1
import { defineCollection, z } from 'astro:content';
2

3
const blogCollection = defineCollection({
4
  type: 'content',
5
  schema: z.object({
6
    title: z.string(),
7
    summary: z.string(),
8
    category: z.enum(['setup', 'troubleshoot', 'checklist']),
9
    tags: z.array(z.string()).optional(),
10
    pubDate: z.date().optional(),
11
  }),
12
});
13

14
export const collections = {
15
  'blog': blogCollection,
16
};

適当な記事を用意する#

first.mdのプレビュー

先ほど作成したcontentフォルダの中にblogフォルダを作成します。そしてその中にfirst.md（ファイル名は一例）を作成します。

このmd（Markdown）ファイルに、以下のような内容を書いておきます。この記事ではローカルのみではありますが、あとでここで書いた通りにお手軽に全世界へ公開できるようになります。

1
---
2
title: "GitHubからCloudflare Pagesへ自動デプロイ！"
3
summary: "知識ゼロから爆速構築"
4
category: "setup"
5
tags: ["Astro", "Cloudflare"]
6
pubDate: 2026-01-19
7
---
8

9
## 成功
10

11
これは **VS Code** で書いて **GitHub** にプッシュした記事です。
12
自動的にCloudflare Pagesが検知して、数分でWebサイトに表示されます。
13

14
### 仕組み
15

16
1. Markdownを書く
17
2. GitでPushする
18
3. Cloudflare　Pagesが処理
19
4. 完成！
20

21
`print("Hello World")`

記事が描写されるよう設定#

first.mdは、いわば、ウェブページにどのような内容を記載するかの情報を与えるファイルです。 Astroではその情報をどのように表示するかと言う設定も作成する必要があります。

/src/pages/blog/[...slug].astroの中身を以下に置き換えます。ファイル自体が存在しない場合は、フォルダ名やファイル名を変えることなく新規作成してください。

[...slug].astroのプレビュー

1
---
2
import { getCollection } from 'astro:content';
3
import type { GetStaticPaths, InferGetStaticPropsType } from 'astro';
4
import Layout from '../../layouts/Layout.astro';
5

6
export const getStaticPaths = (async () => {
7
  const blogEntries = await getCollection('blog');
8
  return blogEntries.map((entry) => ({
9
    params: { slug: entry.slug },
10
    props: { entry },
11
  }));
12
}) satisfies GetStaticPaths;
13

14
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
15
const { entry } = Astro.props as Props;
16

17
const { Content } = await entry.render();
18
---
19

20
<Layout>
21
  <h1>{entry.data.title}</h1>
22
  <p>公開日: {entry.data.pubDate?.toISOString().split('T')[0]}</p>
23
  <hr />
24
  <Content />
25
</Layout>

ホーム画面を記事一覧を表示するよう変更#

デフォルトのWelcomeページではなく、指示一覧を表示するように置き換えます。

デフォルトのインデックス画面の設定

blog/src/pages/index.astroの中身を以下に置き換えます。

1
---
2
import { getCollection } from 'astro:content';
3
import Layout from '../layouts/Layout.astro';
4

5
const allPosts = await getCollection('blog');
6
---
7

8
<Layout>
9
  <h1>ブログ記事一覧</h1>
10
  <ul>
11
    {allPosts.map((post) => (
12
      <li>
13
        <a href={`/blog/${post.slug}`}>{post.data.title}</a>
14
      </li>
15
    ))}
16
  </ul>
17
</Layout>

Astroの設定に問題がないか確認#

VS Codeでターミナルを開きます。

ターミナルの開き方

そしてnpm run devを実行し、http://localhost:4322/などの表示されたリンク先に移動します。

表示を確かめる#

記事一覧画面

テスト用にいくつか記事を追加しているので私の場合複数表示されていますが、手順通り進めた方はこちらの画面に1つ記事が表示されるはずです。

テスト記事の表示

そして一覧画面から記事をクリックすると、このように記事が表示されます。

これで最低限のastroでの記事表示ができました。お疲れ様です。