Hugoで最低限のテンプレート用意してWebページを表示する方法

Programming
目次

概要

Hugoを使った静的なWebサイトを作ることがありました。Webサイトのデザインは未定で、まずは最低限の一覧表示や記事の表示などを作りました。

このような最低限のものを用意した後に、どんどんリッチなものへとコードを追加修正していくのは開発ではよくあり、まずは最低限のものを用意するのは重要です。

しかし、この最低限の表示の部分でうまく記事が表示できず、かなりハマってしまいました。

ここでは、私がやった最低限のテンプレートで記事を表示する方法を紹介します。

環境

  • hugo v0.89.2+extended
  • macOS Monterey

テンプレートの作成

Hugoでは、hugoコマンドを使ってテンプレートを用意することができます。しかしそれだけではうまくいきませんでした。

それでも、テンプレートで作成されるファイルはそのまま使うことができるので、次のコマンドで作成します。ここでは、simpleという名前のテンプレートを作成します。

hugo new theme simple

さらに、hugoの設定ファイルであるconfig.tomlに作成したテーマを利用するように次の内容を追記します。

theme =  'simple '

テンプレートの変更

themes/simple/layouts/_default/以下に幾つかのファイルが作成されているのですが、これらのファイルにはコードが記述されていません。これでは、記事のファイルを作成してもそれが読み込まれず表示がされません。実際に記事を作成して表示しようとしても、「404 page not found」となります。私はここにとてもハマってしまいました。

そこで、それぞれのファイルに次のようにコードを記述します。

<!DOCTYPE html>

<html>

<head>
    {{- partial "head.html" . -}}
</head>

<body>
    {{- partial "header.html" . -}}
    <div id="content">
        {{- block "main" . }}{{- end }}
    </div>
    {{- partial "footer.html" . -}}
</body>

</html>

<div>
    <!-- 記事タイトルをリンクにする -->
    <a href="{{ .Permalink }}">{{ .Title}}</a>
    <div>{{ .Date.Format "2006-01-15" }}</div>
    <p>{{ .Summary}}</p>
</div>

{{ define "title" }} {{ .Title }} – {{ .Site.Title }} {{ end }} {{ define "main" }}
{{ .Content }}
{{ end }}

これで表示をするための最低限のテンプレートが用意できました。

この後は記事を作成したり、テーマ内のcssやjsを変更したりして、Webサイトを作っていくことができます。

さいごに

ここまででは、あくまでも最低限動くまでしかコードを記述していないため、デザインなど色々と不足しているものが多いです。足りない部分は、これからどんどんコードを追加したり修正したりしていく必要があります。

まずは、動くものをということで次はどんどん目的とするものを作っていきます。