やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > 静的サイトジェネレータ > zolaで単一ページを作る

zolaで単一ページを作る

静的サイトジェネレータ

　index.htmlを作ったら、次にやってみること。ここではaboutページを追加してみる。

成果物

前提

  1. Zola 0.14.0 をビルドする（静的サイトジェネレータ）
  2. zolaを使ってサイトを構築してみる（zola init）
  3. Zolaのconfig.tomlを設定する
  4. Zola template/index.html を書く

　トップページが表示できたところまでやっておく。

流れ

　単一ページをつくるには2つの方法がある。簡単なほうからやっていく。

場所とファイル

　各ディレクトリに各ファイルをつくる。

ディレクトリ 拡張子
templates/ html
content/ md

方法1. {page}.mdを作る

  1. page.htmlを追加する
  2. {page}.mdを追加する

方法2. {section}.index.mdを作る

  1. page.htmlを追加する
  2. {section}/index.mdを追加する

やってみる

　aboutページをつくる。

　zola init $SITE_ROOTしたときのディレクトリへ移動する。

1. テンプレートをつくる

template/page.html

<html>
<body>
<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>
{{ page.content | safe }}
</body>
</html>

2. 内容をつくる

content/about.md

　なお、ファイルはcontent/about/index.mdでもよい。

+++
title = "タイトルA"
description = "説明です。"
+++

# 見出しA

　本文A。

# 見出しB

　本文B。

3. zola serve

  1. 端末で$SITE_ROOTへ移動する
  2. zola serveする
  3. ブラウザでhttp://127.0.0.1:1111/へアクセスする
  4. ただしく表示されていることを確認する

4. zola build

  1. 端末で$SITE_ROOTへ移動する
  2. zola buildする
  3. public/配下にabout/index.htmlが作成される
<html>
<body>
<h1>タイトルA</h1>
<p>説明です。</p>
<h1>見出しA</h1>
<p>本文A。</p>
<h1>見出しB</h1>
<p>本文B。</p>
</body>
</html>

どちらの方法にすべきか？

  • 方法1. {page}.mdを作る
  • 方法2. {section}.index.mdを作る

　方法2をおすすめする。

  • 画像などの別ファイルが必要になったとき、すぐに配置できる
  • public/に出力されるのと同じ構成である（混乱を避けられる）

　デメリットとしては面倒くさいことが挙げられる。

所感

　簡単だった。

　あとはteraの構文、変数、config.tomlなどと連携すれば、もっと複雑なものがつくれるだろう。とりあえず以下サイトあたりを参考にすればよい。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux