AstroのFrontmatterでカテゴリ・連載を管理する方法｜既存Markdownを整理

なぜMarkdown側の属性を整理するのか#

これまでも各記事にcategoryとtagsは入っていた。

ただ、この状態だと、たとえば第1回から第8回までの連続記事を細かく分類したいときに少し困る。

• 第1回〜第3回は初期構築
• 第4回〜第6回はデプロイ・インフラ
• 第7回〜第8回はデザイン・UI

というように内容で分類できる一方で、カテゴリだけで管理すると第1回から第8回までのつながりが見えにくくなる。

そこで今回、

• category：大カテゴリ
• subcategory：細分化カテゴリ
• series：同じ連載かどうか
• seriesOrder：連載内の順番

を持たせることにした。

Markdownへ追加した属性#

まず、第1回から第8回までに追加した属性を一覧にすると次のようになる。

すべての記事で共通しているのは、

category: 'web-development'
series: 'astro-cloudflare-site-build'

の2つ。

その上で、記事の内容によってsubcategoryを分け、連載順をseriesOrderで振り直した。

修正したのはFrontmatterだけ#

今回の作業で重要なのは、記事本文には手を入れていないこと。

やったのは、各Markdownの先頭にあるFrontmatterへ必要な項目を追加しただけになる。

第1回の記事を例にすると、修正前と修正後は次のような違いになる。

追加したのは以下の3項目だけ。

subcategory: 'setup'
series: 'astro-cloudflare-site-build'
seriesOrder: 1

この方式にしておけば、既存の記事URLや本文を壊さずに、分類用の情報だけを増やせる。

第1回から第8回の分類#

今回の分類は次の通りにした。

回	細分化カテゴリ	理由
第1回	初期構築	AstroとCloudflare Workersを選んだ理由を整理しているため
第2回	初期構築	Astro環境の作成、Wrangler設定など初期セットアップが中心のため
第3回	初期構築	GitHubへの初回登録までを扱っているため
第4回	デプロイ・インフラ	Cloudflare Workersへの公開とGitHub連携が主題のため
第5回	デプロイ・インフラ	自動デプロイの確認が中心のため
第6回	デプロイ・インフラ	独自ドメイン取得とWorker接続を扱っているため
第7回	デザイン・UI	デザイン見直しの方針整理が主題のため
第8回	デザイン・UI	デザイン実装と見た目の改善が主題のため

第8回についてはCloudflareエラーの修正も含んでいるが、記事全体の主題は「サイトデザインの実装」にあるため、designにそろえた。

カテゴリで分けても連載は分断しない#

今回の整理で一番大事なのはここ。

カテゴリを細かく分けると、

• 第1回〜第3回はsetup
• 第4回〜第6回はdeploy
• 第7回〜第8回はdesign

という形になる。

ただ、これだけだと連続記事がばらけてしまう。

そこで、カテゴリとは別にseriesとseriesOrderを持たせる。

これで、表示上は「WEB制作 > デザイン・UI」と出しながらも、記事下部の前後リンクでは

第7回 → 第8回 → 第9回

のように連載順を維持したままつなげることができる。

実際に追加した値#

今回追加した内部値は以下の通り。

category: 'web-development'
subcategory: 'setup' | 'deploy' | 'design' | 'operation'
series: 'astro-cloudflare-site-build'
seriesOrder: 1〜9

表示上は、たとえば次のように変換する想定。

• web-development → WEB制作
• setup → 初期構築
• deploy → デプロイ・インフラ
• design → デザイン・UI
• operation → 運用・改善

今回は第9回でこの整理内容自体を記事にしているため、自分の記事についてはoperationを設定した。

第1回から第8回のMarkdownを修正#

修正したのは次の8本。

• 01-why-astro-and-cloudflare.md
• 02-build-astro-on-windows.md
• 03-push-astro-to-github.md
• 04-deploy-to-cloudflare-workers.md
• 05-test-post-and-auto-deploy.md
• 06-register-domain-and-connect-worker.md
• 07-plan-note-inspired-redesign.md
• 08-redesign-and-cloudflare-build-fix.md

どのファイルも、本文やslugはそのまま。Frontmatterに必要な情報を追加しただけなので、既存の記事内容やURLを崩さずに整理できた。

今後この情報をどう使うか#

Markdown側に情報を持たせておけば、サイト側ではこのFrontmatterを読むことで次のようなことができる。

• カテゴリ一覧を自動生成する
• 細分化カテゴリごとの記事一覧を作る
• タグ一覧を自動生成する
• 同じ連載の記事一覧を作る
• 前の記事・次の記事をseriesOrder順で表示する

つまり、カテゴリ構成や連載導線を、本文にリンクを手書きせず実装できるようになる。

記事数が少ないうちは不要に見えても、10本、20本と増えた時にこの差はかなり大きい。

カテゴリと連載情報を記事側へ持たせた#

今回は、記事データそのものを整理した。

• 第1回〜第8回のMarkdownを一括で確認
• 本文やslugは変更しない
• subcategoryを追加
• seriesを追加
• seriesOrderを追加
• カテゴリと連載を別軸で扱える状態にした

サイトの記事数が増えていくことを考えると、この作業は地味でも重要。

次は、今回追加したFrontmatterをサイト側で読み取り、カテゴリページや連載ページ、前後記事リンクへ反映できるようにしていく。