Hugoでwebサイト構築(1) レイアウトことはじめ

written: kengo
tag:

1. Hugoでサイト構築を始める

前々回前回までの準備が終わると、具体的にサイトが作れるようになります。 構築を開始するまえに、Hugoがどのように動作しているかを整理します。

1-1. Hugoのサイト構築の流れ

Hugoでサイトを作る場合、「layouts」(=HTML)で画面構成をつくり「content」(=markdown)に記事をつくる2段構成になります。 Jekyllなどとも似た構成なのであまり迷うことはないと思います。WordPressで例えるとlayoutsがデザインテーマ、contentがそれぞれのブログ記事になります。 実際にはCSSやJavaScriptも使いたいと思いますので、それらのファイルは「static」フォルダに入れておき、layouts内で参照します。

2. トップページのレイアウトをつくる

「layouts」内直下のindex.htmlにHTMLを記述してください。これがトップページになります。 このindex.htmlのみ特殊でcontentのmarkdownを使用せず、そのままHTMLが構成されてpublicフォルダには入ります。

layouts/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hugoページ</title>
</head>
<body>
	
<h1>Welcome to Hugo!</h1>
Hugoで作ったホームページです。
Copyright (c) Watanabe-DENKI Inc.
</body> </html>

上記のようなHTMLをつくりますが、header部やfooter部など、サイト全体の共通部分を部品化します。

2-1. 部品HTMLの作成と利用(partial)

部品は「layouts > partials」フォルダ内に作成します。 例えば、共通で使うheader部をsite_header.html、footer部をsite_footer.htmlという各部品にした場合、下記のようになります。

layouts/partials/site_header.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hugoページ</title>
</head>
<body>
	
<h1>Welcome to Hugo!</h1>

layouts/partials/site_footer.html

	
Copyright (c) Watanabe-DENKI Inc.
</body> </html>

これらを使用したindex.htmlは以下になります。

layouts/index.html

{{ partial "site_header.html" . }}
Hugoで作ったホームページです。
{{ partial "site_footer.html" . }}

上記ファイルを用意したら、hugoコマンドでサイトを生成します。

hugo

publicフォルダにindex.htmlが出来上がっているので確認してみてください。

またpartialの部品は、一度用意すれば以後同じように使えますので、 各ページで同じような記述をする部分で使えば、省力化できます。

3. 記事のレイアウトをつくる

記事のレイアウトは「layouts > _default」フォルダ内に作成します。 上記のフォルダ内にsingle.htmlを作成し、トップページ同様HTMLを記述します。 せっかくなので2で作ったpartialを使います。

layouts/_default/single.html

{{ partial "site_header.html" . }}
{{ .Content }}
{{ partial "site_footer.html" . }}

{{ .Content }}は、記事の本文を挿入してくれます。

3-2. 記事をつくってみる

レイアウトができたら記事が必要ですね。 簡単な記事をマークダウンで作ってみます。

content/test.md

+++
Title = "テスト記事「象」"
+++

象のたまごはおいしいぞう。

{{ .Content }}に入るのは、「象のたまごはおいしいぞう。」になります。 +++で包まれた部分については3-3で説明します。

上記ファイルを用意したら、hugoコマンドでサイトを生成します。

hugo

public/test/index.htmlが出力されているので内容を確認してください。 single.htmlのレイアウトにtest.mdの記事内容が挿入されていれば成功です。

3-3. partialにも記事データを挿入する(Front Matterの活用)

partialでも記事の内容を使うことができます。 せっかくの機能を生かすためにもsite_header.htmlを少し書き換えてみます。

layouts/partials/site_header.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	{{ .Title }}
</head>
<body>
	

{{ .Title }}

こちらは、2箇所に{{ .Title }}を入れました。 3-2で作ったtest.mdには、先頭に+++で包んだ行があり、Titleが指定されています。 この+++で包んだ先頭部分のことをFront Matterと言い、マークダウンでよく使われます。 {{ .Title }}を記述すると、Front MatterのTitleで指定された文字列が自動的に挿入されます。 各ページのタイトルを変えられるので便利です。

hugoコマンドでサイトを再生成します。

hugo

publicフォルダを確認します。該当のHTMLでページのタイトルが変化していれば成功です。

References