🎩今日の概要

こんにちは、ボスです！ 前回はサイトの骨組みを作りましたが、記事のタイトルが 001-first-step のようにファイル名から自動生成されていて、少し味気ないですよね。 今回は、Markdownファイルに「メタデータ」を追加して、もっとリッチなタイトルや投稿日を表示できるようにビルドスクリプトを改良します。

🤖 さっちゃんとボスの会話ログ

✨ さっちゃん：ボス、今のままだと記事タイトルがファイル名そのままですよね？ 001-first-step みたいな。日本語のちゃんとしたタイトルを付けたいです！

ボス：いいところに気づいたね、さっちゃん。そのために「メタデータ」という仕組みを導入しよう。Markdownファイルの先頭に、タイトルや日付といった情報を書けるようにするんだ。

さっちゃん：なるほど！具体的にはどうやって書くんですか？

ボス：---で囲んだエリアに キー: 値 の形式で書くんだ。これを「YAML Front Matter」と呼ぶ。こんな感じさ。

---
title: "これが本当の記事タイトルです"
date: "2025-07-15"
---

ここから下が記事の本文...

さっちゃん：分かりやすい！これをビルドスクリプトで読み込んで、HTMLに埋め込むんですね！

▶️ 手順1：ライブラリを追加しよう

メタデータを簡単に扱うために、Pythonのライブラリを追加します。 requirements.txt というファイルを作って、必要なライブラリを書いておくと管理が楽になります。

プロジェクトのルートに requirements.txt を作成し、以下を記述してください。

markdown
jinja2
python-frontmatter

そして、以下のコマンドでインストールします。

pip install -r requirements.txt

💻 手順2：ビルドスクリプトを改良しよう

scripts/build.py を書き換えて、メタデータを読み込めるようにします。

• python-frontmatter を使ってMarkdownファイルを読み込む
• メタデータの title や date を取得する
• 取得した情報をテンプレートに渡す

✅ 手順3：テンプレートを修正しよう

templates/article.page.html と templates/index.page.html を修正して、メタデータから受け取った情報を表示できるようにします。

これで、ファイル名に依存しない、自由な記事タイトルが付けられるようになります！ 次回は、さらにリッチな表現を目指していきましょう。

おたのしみに！