Astroでブログを作ってみる！記事を書くまでの流れを初心者向けに解説

Astroでブログを作ってみたいけど、最初は「何をどこに置けばページになるの？」となりがちですよね。私もこの「あれこれびより」を作るとき、最初はファイルの置き場所やレイアウトの考え方でちょっと迷いました。

この記事では、Astroでブログを作るときの大きな流れを初心者向けにまとめます。今回はAWSへの公開、S3、CloudFront、GitHub Actionsの細かい話はいったん置いておきます。ゴールは、ローカルで記事を書いて、最後に npm run build で dist/ を生成するところまでっすね。

Astroでブログを作る流れ

Astroのブログは、かなりざっくり言うと「記事として書いたMarkdownを、HTMLページに変換する仕組み」です。このブログの場合、流れはこんな感じです。

Markdown / MDX記事
  ↓
Astro
  ↓
レイアウト適用
  ↓
静的HTML生成
  ↓
dist/

普段は src/pages/posts/ に記事を書いていきます。記事本文はMarkdownで書けるので、HTMLを毎回ぜんぶ手書きする必要はありません。

その代わり、記事のタイトルや公開日、カテゴリ、タグなどはFrontmatterという設定欄に書きます。 Astroはその情報を使って、記事ページや記事一覧ページを作ってくれるというわけです。

Astroでブログを作るメリット

Astroでブログを作るメリットは、まず表示が軽くしやすいところです。必要以上のJavaScriptをブラウザに送らずに、HTML中心のページとして作りやすいんですよね。

このブログも、読むことが中心のサイトなので、最初から大きなJavaScriptフレームワークは入れていません。記事を読むだけなら、ページ表示が軽いほうがうれしいですし、スマホでも見やすくなりやすいです。

個人的にいいなと思うポイントは、こんな感じです。

Markdownで記事を書ける
Layoutで記事の見た目をそろえられる
コンポーネントでヘッダーや記事カードを使い回せる
静的HTMLとして出力できる
SEOに必要なmetaタグを共通レイアウトで管理しやすい
必要になったらMDXでコンポーネントも使える

ブログって、記事数が増えてから管理が大変になりがちです。 Astroだと、記事本文、レイアウト、設定、画像をある程度分けて管理できるので、あとから見直しやすいのが助かりますね。

Astroでブログを作るデメリット

もちろん、Astroにすれば全部ラクになるわけではないです。最初は src/pages/、Layout、Frontmatter、public/、buildなど、覚える言葉がちょっと多いです。

WordPressやnoteみたいに、管理画面で記事を書いて公開ボタンを押すだけ、という感じではありません。記事ファイルを作って、Frontmatterを書いて、画像を置いて、チェックして、ビルドする、という流れになります。

気をつけたいところは、こんな感じです。

MarkdownやHTMLの基本は少し必要
ファイル名がURLになるのでslug設計を考える必要がある
記事の入力ミスは自分でチェックする必要がある
コメント機能や閲覧数の自動更新は別の仕組みが必要
本番公開するには別途ホスティング先を用意する必要がある

特に静的サイトなので、閲覧数をリアルタイムに増やすような機能はそのままではできません。このブログでは、記事ページを開いたときにブラウザからAWS Lambda Function URLへPOSTして、Lambda経由でDynamoDBの閲覧数を更新する形にしています。ホームの記事一覧ではGETで現在の閲覧数だけを取得しているので、ホームを見ただけではカウントが増えないようにしている感じっすね。

なので、Astroは「記事をHTMLとして軽く公開したい」ブログにはかなり合います。一方で、「管理画面で全部やりたい」「ログイン機能やコメント機能も最初からほしい」という場合は、別の選択肢も検討したほうがいいっすね。

Astroプロジェクトを作る

新しくAstroプロジェクトを作るときは、公式の作成コマンドを使います。

npm create astro@latest

質問に答えていくと、Astroのプロジェクトが作られます。最初からブログ用テンプレートを選ぶ方法もありますし、空のプロジェクトから少しずつ作る方法もあります。

このブログでは、Astroを静的サイトとして使っています。設定ファイルでは、output: 'static' を指定しています。

export default defineConfig({
  site,
  output: 'static',
  integrations: [mdx(), sitemap()]
});

static にしておくと、ビルド時にHTMLファイルとして出力されます。ブログのように、読むページが中心のサイトとはかなり相性がいいっすね。

このブログのディレクトリ構成

「あれこれびより」では、主に次のような構成にしています。

src/
  pages/
    index.astro
    posts/
      astro-blog-getting-started.md
      index.astro
    categories/
    tags/
    search.astro
  layouts/
    BaseLayout.astro
    BlogPostLayout.astro
  components/
  config/
  utils/
  styles/
public/
  images/
  og/
  favicon.svg
scripts/
  check-content.mjs
  check-images.mjs
templates/
  posts/

Astroでは、基本的に src/pages/ の中に置いたファイルがページになります。たとえばトップページは src/pages/index.astro、記事一覧は src/pages/posts/index.astro です。

記事ファイルも src/pages/posts/ に置いています。ファイル名がそのままURLの一部になるので、この記事なら astro-blog-getting-started.md から /posts/astro-blog-getting-started/ が作られます。

記事はMarkdownで書く

このブログの記事は、MarkdownまたはMDXで管理しています。普通の記事ならMarkdownで十分らしいです。よくわかんないですけどw

MDXは、記事の中でAstroコンポーネントを使いたいときに便利らしいですよ。たとえば商品レビューで専用のアフィリエイトボックスを出したい、みたいなときはMDXが使いやすいですね。

今回のような通常の解説記事は .md で書いています。

src/pages/posts/astro-blog-getting-started.md

Markdownだと、見出しやリスト、コードブロックをシンプルに書けます。ブログを続けるうえでは、この「記事を書くときの楽さ」がけっこう大事っす。

Frontmatterで記事情報を書く

記事ファイルの先頭には、Frontmatterを書きます。このブログでは、だいたい次のような情報を入れます。

---
layout: ../../layouts/BlogPostLayout.astro
title: "記事タイトル"
description: "記事の説明文"
publishedAt: 2026-09-11
updatedAt: 2026-09-11
category: tech
tags:
  - Astro
  - ブログ制作
thumbnail: "/images/posts/astro-blog-getting-started.svg"
thumbnailAlt: "記事内容が伝わるサムネイル画像の説明"
draft: false
type: article
views: 0
affiliateDisclosure: false
---

title は記事ページの見出しやSEOのtitleに使われます。 description は記事一覧やmeta descriptionに使われます。 publishedAt と updatedAt は公開日と更新日ですね。

category は tech、review、life のいずれかを使います。このカテゴリは src/config/categories.ts で管理しています。カテゴリを増やす場合は、記事だけでなくカテゴリ設定も更新する必要があります。

draft: true にすると、開発中は見えますが、本番ビルドでは一覧から除外されます。公開する記事は draft: false にします。

レイアウトで記事の見た目をそろえる

記事ごとにHTMLを全部書くのは大変です。なので、このブログでは BlogPostLayout.astro という記事用レイアウトを使っています。

記事Frontmatterのこの行がポイントです。

layout: ../../layouts/BlogPostLayout.astro

このレイアウトが、記事タイトル、説明文、公開日、更新日、閲覧数、タグ、目次、関連記事などをまとめて表示してくれます。つまり、記事を書く側は本文に集中できるわけです。

共通の <head>、ヘッダー、フッター、SEO設定は BaseLayout.astro が担当しています。 BlogPostLayout.astro は、その BaseLayout.astro の上に記事用の表示を重ねるイメージっすね。

記事一覧を作る仕組み

記事一覧ページは src/pages/posts/index.astro で作っています。このページでは、getPublishedPosts() を使って公開記事を取得しています。

const posts = getPublishedPosts();

getPublishedPosts() は src/utils/posts.ts にある関数です。 src/pages/posts/ のMarkdown / MDXを読み込んで、公開日が新しい順に並べています。

下書き記事の扱いもここで決まります。

.filter((post) => import.meta.env.DEV || !post.data.draft)

開発中は下書きも確認できて、本番では draft: true の記事を除外する、という動きです。この仕組みがあると、書き途中の記事を安心して置いておけます。

画像はpublic配下に置く

記事のサムネイルや図解画像は、public/ 配下に置きます。このブログでは、記事用画像は主にここです。

public/images/posts/

たとえば今回の記事のサムネイルは、次のパスに置いています。

public/images/posts/astro-blog-getting-started.svg

記事Frontmatterからは、次のように参照します。

thumbnail: "/images/posts/astro-blog-getting-started.svg"
thumbnailAlt: "Markdown記事がAstroで静的HTMLになる流れの図"

public/ 配下のファイルは、URLでは /images/posts/... のように参照できます。相対パスで迷うより、このルールでそろえると分かりやすいですね。

ローカルで確認する

記事を書いたら、まずローカルで確認します。

npm run dev

このコマンドでAstroの開発サーバーが起動します。ブラウザで表示を確認しながら、文章や見出し、画像の見え方を直していく感じです。

このブログでは、検索バー、ヘッダー、フッター、ダークモード、記事の目次などもレイアウト側で出るようにしています。記事を書くだけでサイト全体の見た目に乗ってくれるのは、かなり助かります。

記事チェックをする

このブログでは、記事を追加したあとに独自のチェックコマンドを実行します。

npm run check:content
npm run check:images

check:content では、Frontmatterに必要な項目があるか、カテゴリが正しいか、日付がおかしくないか、画像が存在するかなどを確認しています。

check:images では、記事やコンポーネントから参照している画像が public/ に存在するかを確認しています。

初心者のうちは、記事を書いたあとに細かい設定ミスをしがちです。こういうチェックを用意しておくと、公開前に気づけるので安心っすね。

buildでdistを生成する

本番用の静的ファイルを作るときは、次のコマンドを実行します。

npm run build

このブログの package.json では、build は次のように定義されています。

{
  "build": "astro check && astro build"
}

まず astro check でAstroやTypeScriptのチェックをして、そのあと astro build で静的ファイルを生成します。

ビルドが成功すると、dist/ にHTMLやCSSなどが出力されます。この時点で、ブログは「サーバーで動くアプリ」ではなく、「配信できる静的ファイルの集まり」になります。

dist/
  index.html
  posts/
    astro-blog-getting-started/
      index.html
  categories/
  tags/
  rss.xml
  robots.txt
  sitemap-index.xml

ここまでできれば、Astroでブログを作る基本の流れはかなり見えてきます。

最初は複雑にしすぎなくていい

AstroにはContent Collectionsなど便利な機能もあります。ただ、このブログでは今のところ src/pages/posts/ の記事を src/utils/posts.ts で読み取る形にしています。

最初から全部きれいに作ろうとすると、ファイル構成や型定義だけで疲れがちです。まずは「記事を書く」「一覧に出す」「ビルドする」の流れを掴むのが大事だと思います。

ブログはあとから育てられます。カテゴリを増やしたり、記事テンプレートを整えたり、SEOを強化したり、画像運用を決めたりするのは、そのあとでも大丈夫っす。

まとめ

Astroでブログを作る流れは、ざっくり言うと次の通りです。

Astroプロジェクトを作る
src/pages/ にページを置く
src/pages/posts/ にMarkdown記事を書く
Frontmatterで記事情報を管理する
Layoutで記事の見た目をそろえる
記事一覧で公開記事を並べる
画像は public/ 配下に置く
npm run dev で確認する
npm run build で dist/ を生成する

最初は用語が多くて難しく見えますが、やっていることは「記事を書いて、AstroでHTMLにする」という流れです。ここが分かると、Astroブログの全体像がかなりつかみやすくなります。

次は、この dist/ をどうやって公開するか、という話になっていきます。 AWSやS3、CloudFrontの話はまた別の記事でゆっくりまとめていきたいですね。

ではでは、おつかれっした～。