やってみる

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

Zola template/index.html を書く

 config.tomlに書いたタイトル、説明、著者名をのせる。

成果物

前提

  1. Zola 0.14.0 をビルドする(静的サイトジェネレータ)
  2. zolaを使ってサイトを構築してみる(zola init)
  3. Zolaのconfig.tomlを設定する

手順

  1. config.tomlを書く
  2. templates/index.htmlを書く

1. config.tomlを書く

title = "ytyaru-zola"
description = "静的サイトジェネレータ<code>zola</code>について書きなぐる。自作テンプレートも配布する。"

[extra]
author = "ytyaru"

 以下のテンプレートで参照している値のみ抜粋した。

2. templates/index.htmlを書く

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ config.title }}</title>
<meta name="description" content="{{ config.description }}">
<meta name="author" content="{{ config.extra.author }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
</head>
<body>
{#<header><nav><ul><li><a href=""></a></li></ul><nav></header>#}
{#<main><article><section><h1>{{ config.title }}</h1><p>{{ config.description }}</p></section></article></main>#}
<main><article><section><h1>{{ config.title }}</h1><p>静的サイトジェネレータ<code>zola</code>について書きなぐる。自作テンプレートも配布する。</p></section></article></main>
<aside><!-- ad --></aside>
<footer>© 2021 {{ config.extra.author }}</footer>
</body>
</html>

学習したこと

  • zolaテンプレートエンジンtera」を使う
    • {%,{#,,{{のように囲むことで使う
      • {#から#}で囲んだ範囲はコメントアウトされる
      • {%から%}で囲んだ範囲はif,for,setなどの命令である
      • {{から}}で囲んだ範囲は変数を文字列としてHTMLに出力する
        • config.tomlの値を使うなら{{ config.セクション名.キー名 }}とする
          • config.descriptionの値にHTMLタグを書いてもサニタイズされて文字列として出力されてしまった
            • 直接テンプレートHTMLに書いた
        • config.tomlの構文は決まっている
          • セクション名
          • キー名
          • 値の型
        • config.toml[extra]authorについて
          • titledescriptionのようにセクションなしのところに書きたい
            • 構文エラーになってしまう
              • ユーザが自由に拡張できるのは[extra]セクション配下のみ

f:id:ytyaru:20210730134344p:plain

所感

 とんでもなく苦労する。サイトをつくるには以下のような学習が必要だ。

  1. Markdownを学ぶ
  2. HTMLを学ぶ
  3. CSSを学ぶ
  4. JavaScriptを学ぶ
  5. Sassを学ぶ
  6. JavaScriptライブラリ/フレームワークを学ぶ
  7. テンプレートエンジンteraのテンプレート構文を学ぶ
  8. 静的サイトジェネレータzolaの仕組みを学ぶ
  9. レンタルサーバを使えるようにする

 とくにteraには、macro, import(macro), include, extend, filter, if, for, set, ショートコード、TOML設定ファイルなど様々な概念がある。使いこなさなければDRYに書けずテンプレートエンジンを使う意味がない。しかしそれらを学ぶにはかなりのコストを要する。肝心のテンプレートは可読性が低い。

 いうまでもなく、HTML,CSS,JSは日々進化しつづけており変化が速い。それらを学ぶことだけでも大変だ。

 zolaに至っては正式版ですらない。後方互換についてはまだ考慮されない段階だ。学習したことがムダになることすらありうる。

 よしんばローカルでHTMLが作成できたとしても、それをレンタルサーバにデプロイするまでの工程も必要。少なくともサービスをみつけてアカウントを取得せねばならない。

 やりたいことを実現するにはどうしたらいいの? という疑問を解決するのが超大変。

 一体いつになったらデプロイできるんだ……。はてしない修行がはじまる予感。