Astroで記事を作成する場合、どのようにディレクトリ構成で記事を管理するのが良いのか？
そんな疑問が生じたので、色々と調査してみました。
Astroの推奨構成「1記事=1ディレクトリ」
従来の管理方法と懸念点
現在は「src/content/blog/2026/03」といったように、年/月でディレクトリを作成して、そこに記事を作成したり、画像ファイルを保存しています。
記事の数が少ない場合はこの管理方法でも問題ないと思いますが、記事数や画像ファイルが多くなると、ディレクトリ内のファイル数が膨大になりすぎて、やはり管理しづらくなってくるという懸念があります。
記事と画像をまとめるメリット
Astroでの推奨構成はあるのかを調べてみたところ、1記事ごとに専用のディレクトリを作成して、そこに記事（Markdown）や画像ファイルをまとめて格納していく手法（コロケーション）が推奨されていることがわかりました。
こうすることで、記事を削除したい場合などはディレクトリをまるごと削除するだけで、画像ファイルといった関連するデータも綺麗に削除することが出来るという大きなメリットがあるのです。
毎日の更新に最適なディレクトリ構造
今回は「年」「月」「日付 + 記事名」という構成で記事を作成していくことにしました。
src/content/blog/
└── 2026/ ←【年】で分ける
├── 03/ ←【月】で分ける
│ ├── 08-astro-content-collection ←【日付＋記事名】のディレクトリを作る
│ │ ├── index.md ← 本文
│ │ └── astro-setup_01.png ← この記事で使う画像
「日付 + 記事名」というディレクトリ名にしておくことで、VS Codeなどのエディタで表示した場合に日付順に並ぶため、過去の記事がとても探しやすいというメリットもあります。
同じ日に複数の記事を作成したい場合は、後ろの記事名部分を変えてあげることで対応出来ます。
公開URLの変更（slugの活用）
ディレクトリ名がそのままURLになる問題
しかし、このままだと記事を作成したディレクトリ名がそのままURLとなってしまいます。
公開URL http://localhost:4321/blog/08-astro-content-collection/
この場合、URLが少し長くなったり、ディレクトリ名を変えるとURLまで変わってしまったりするため、URLを自由に設定できる機能を使います。
フロントマター(Frontmatter)の「slug」で自由にURLを設定する
Markdown記事の上部にあるフロントマター（.astroファイルのコンポーネントスクリプトと同じように --- で囲まれた部分）に、「slug」という項目を追加してあげます。
この「slug」の機能を使うと、設定した文字列を優先してURLとして使用できるようになります。
例えば、「slug: "2026-03-09"」と設定すると、記事のURLは下記のようになります。（※SEOを意識して「slug: "astro-content-collection"」のように英単語にするのもおすすめです）
公開URL http://localhost:4321/blog/2026-03-09/
--- title: "Astroのコンテンツコレクションを解説" pubDate: 2026-03-09 description: "記事のディレクトリ構成を考える記事です。" author: "tamohiko" slug: "2026-03-09" --- ここから本文記事...
これで、エディタ上での管理のしやすさと、公開されるURLの自由度を両立することができました！
コメント