Astroでは、使い慣れたMarkdown形式でブログ記事を簡単に作成できます。ここでは、記事用のMarkdownファイルを作成し、共通のレイアウトを適用する基本的な手順を紹介します。
ブログ記事作成の基本的な流れ
- 記事のレイアウトを作成する: ブログ記事全体で共通するヘッダーやフッターなどの見た目を定義するコンポーネントを作成します
- Markdownファイルを作成する: 記事の内容をMarkdownで記述し、どのレイアウトを使うかを指定します
- 確認する: 開発サーバーで表示を確認します
Astoroでブログ作成する手順
1.レイアウトコンポーネントを作成する(src/layouts/BlogPostLayout.astro)
まず、ブログ記事の骨組みとなるレイアウトコンポーネントを作成します。src/layouts/ ディレクトリ（なければ作成してください）に BlogPostLayout.astro というファイルを作成し、以下のコードを記述します。
---
// レイアウトコンポーネント (BlogPostLayout.astro)
// Markdownファイルのフロントマターからデータを受け取る
const { frontmatter } = Astro.props;
---
<html lang="ja">
<head>
<meta charset="utf-8" /> {/* ← 重要: 文字化けを防ぐために必ず記述 */}
<meta name="viewport" content="width=device-width" />
<title>{frontmatter.title}</title> {/* Markdownのタイトルを表示 */}
</head>
<body>
<header>
<p>My Astro Blog</p> {/* 例:共通ヘッダー */}
</header>
<main>
<h1>{frontmatter.title}</h1> {/* Markdownのタイトルを表示 */}
<article>
<slot /> {/* ← ここにMarkdown本文の内容が挿入される */}
</article>
</main>
<footer>
<p>© My Blog</p> {/* 例:共通フッター */}
</footer>
</body>
</html>
-
src/layouts/ディレクトリに置くのが一般的です。 -
Astro.props.frontmatterで、Markdownファイルに記述されたタイトルなどの情報を受け取ります。 -
<slot />タグの部分に、Markdownファイルの本文が自動的に挿入されます。 -
重要:
layoutを使う場合、<meta charset="utf-8">はレイアウトファイル内に記述する必要があります。
2.Markdown記事ファイルを作成する (src/pages/my-first-post.md)
次に、src/pages/ ディレクトリに実際のブログ記事となるMarkdownファイルを作成します。ここでは例として my-first-post.md という名前で作成します。
---
# src/pages/my-first-post.md
layout: ../layouts/BlogPostLayout.astro # 使用するレイアウトファイルを指定
title: '私の最初の投稿'
pubDate: 2025-04-13
description: 'これは私の最初のAstroブログ投稿です。'
author: 'Astro Learner'
---
## はじめに
これは **Markdown** で書かれた最初のブログ記事です。
Astroを使うと、簡単にMarkdownでコンテンツを作成できます。
- リスト項目1
- リスト項目2
記事の内容はここに自由に記述できます。
- ファイル名はそのままURLの一部になります (この例では
/my-first-post)。 - ファイルの先頭にある
---で囲まれた部分は フロントマター と呼ばれ、記事のメタデータをYAML形式で記述します。-
layout:で、先ほど作成したレイアウトファイルのパスを指定します (src/pagesから見た相対パス)。 -
title:は記事のタイトルで、レイアウト側 ({frontmatter.title}) で利用できます。 -
pubDate,description,authorなど、自由にメタデータを追加できます（レイアウト側で利用しなければ表示には影響しません）。
-
-
---の後がMarkdown形式の本文です。
3.開発サーバーで確認する
ターミナルで開発サーバーを起動します。
npm run dev
# または pnpm dev, yarn dev
ブラウザで http://localhost:4321/my-first-post にアクセスしてください。
Markdownで記述した本文が、BlogPostLayout.astro で定義したレイアウト（ヘッダー、フッター、タイトルなど）の中に表示されていれば成功です！
補足：もっと記事が増えたら
ブログ記事が非常に多くなる場合は、Astroの「Content Collections API」という機能を使うと、より効率的に記事を管理できます。型チェックや一覧ページの生成などが簡単になりますが、まずはこの方法でMarkdown記事の作成に慣れるのがおすすめです。