サイトとテーマの準備が整ったら、ついにHTMLを書いて本格的なWebデザインの工程に入ります。
Hugoのテーマ制作において最も重要なのが、サイト全体の共通レイアウトを定義する「ベーステンプレート（baseof.html）」の作成です。

この記事では、ベーステンプレートの仕組みと、サイトのトップページを表示するための index.html の作り方を解説します。Hugoの強力なテンプレート言語の基礎に触れながら進めていきましょう。

☝️ ちょっとアドバイス：テンプレート言語について

ここから登場するHTMLコードの中には、 {{ .Title }} や {{ block "main" . }} のような {{ }} で囲まれた不思議な記述が登場します。これがHugo（Go HTML Template）の「テンプレート変数・関数」です。
現段階では「指定した文字列や記事のデータに自動で置き換わる仕組み」と捉え、ひとまずコードをコピー＆ペーストして進めてOKです。詳しい意味は別の記事で解説します！

1. サイトの共通レイアウト：baseof.html

Hugoでは、ヘッダー（<header>）やフッター（<footer>）、または <head> タグ内の各種設定など、全ページで共通して表示する部分を baseof.html という一つのファイルで一元管理します。

themes/my-diy-theme/layouts/baseof.html というファイルを作って、以下のコードをコピペしてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }} | {{ .Site.Title }}</title>
    <!-- CSSはあとで追加するよ！ -->
    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>
    <header>
        <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
    </header>
    
    <main>
        <!-- ここに各ページの内容が入る魔法の呪文 -->
        {{ block "main" . }}{{ end }}
    </main>
    
    <footer>
        <p>&copy; 2024 My DIY Blog</p>
    </footer>
</body>
</html>

{{ block "main" . }} の部分がポイント！
ここに、ページごとに違う内容がガチャン！と合体します。🤖

2. トップページ：index.html

次はトップページです。
themes/my-diy-theme/layouts/index.html を作成します。
（layouts/index.html はトップページ専用のテンプレートです。）

{{ define "main" }}
    <h2>ようこそ！</h2>
    <p>ここは私がDIYで作ったHugoテーマのブログです。</p>
    
    <h3>最新の記事</h3>
    <ul>
    <!-- 最新の記事を5件とってきてループ！ -->
    {{ range first 5 .Site.RegularPages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
    </ul>
{{ end }}

{{ define "main" }} で囲まれた部分が、さっきの baseof.html の block "main" に挿入されます。
これでトップページの完成です！👏

3. サイトを表示してみよう！

ここまで来たら、一度サーバーを起動して確認してみましょう！
Step 2のときは真っ白（またはエラー）でしたが、今回はどうでしょうか？

hugo server

ブラウザで http://localhost:1313 を開いてみてください。

「ようこそ！ここは私がDIYで作ったHugoテーマのブログです。」というテキストや、最新記事のリストが表示されていれば成功です！

ベーステンプレートとトップページを組み立ててサイトの土台を完成させよう

このステップを通して、サイト全体のレイアウトを担う baseof.html と、トップページ専用の index.html が機能し、{{ block "main" . }} と {{ define "main" }} というテンプレート構造によってHTMLファイル同士がどのように合体するのかを体験できました。

まだCSSの装飾を入手していないため見た目は質素ですが、Hugoサイトとしての重要な骨格は完成しています。次は、ブログの主役である「個別ページ（記事ページ）」のテンプレートを作成していきましょう！