【Step 4】Hugoの個別ページテンプレート(page.html)の作り方と記事の書き方

Hugoでブログやメディアサイトを作るなら、記事の中身を表示するための仕組みが不可欠です。

この記事では、ブラウザで各記事を表示するための「個別ページテンプレート（page.html）」の作成方法と、Hugoのコンテンツフォルダ（content/）にMarkdown形式で新しい記事を追加する基本手順を解説します。

0. 📂 `content/` フォルダについて

まず、作業場所の content/ フォルダについて知っておきましょう。
ここは、「サイトの原稿（記事）」を置く場所 です。

Hugoは、このフォルダに入っているMarkdownファイル（.md）を見つけて、自動的にWebページ（.html）に変換してくれます。

記事を追加する方法は2つあります：

コマンドで作る: hugo new content ... コマンドを使う（Front Matterなどが自動で入るので楽！）。
ファイルを置く: メモ帳などで書いた .md ファイルを、直接このフォルダにコピーしてもOK。

今回は、Hugoの便利さを体験するために「コマンド」で作ってみましょう。

1. テスト記事を作ってみる

その前に、表示するための記事がないとテストできません。
コマンドで記事を作成しましょう。

hugo new content posts/my-first-post.md

content/posts/my-first-post.md ができたはずです。
中身を適当に書いて…と言われても、書き方が分かりませんよね。
以下の記事で、記事ファイルの書き方を解説しました！

» 【Tips】記事の書き方入門：MarkdownとFront Matter

記事を書いたら、サーバーを起動して確認します。
このとき、下書き記事(draft: true)を表示するために -D オプションを付けるのがコツです。

hugo server -D

サーバーが起動したら、ブラウザで以下のURLにアクセスしてみてください。

http://localhost:1313/posts/my-first-post/

（Topページからリンクを辿ってもいいですが、まだリンクがない場合もあるので直打ちが確実です！）

» 【Tips】これだけは覚えよう！Hugoのよく使うコマンド集

2. 個別ページ：page.html

記事を表示するテンプレートを作ります。
themes/my-diy-theme/layouts/page.html を作成して、以下を記述します。

{{ define "main" }}
<article>
    <!-- 記事のタイトル -->
    <h2>{{ .Title }}</h2>
    
    <!-- 投稿日 -->
    <div class="meta">
        <time>{{ .Date.Format "2006-01-02" }}</time>
    </div>
    
    <!-- 記事の本文 -->
    <div class="content">
        {{ .Content }}
    </div>
</article>
{{ end }}