Zenn
📝

Zolaでブログを作る

2023/06/26に公開
Zola
tech

Zola

HugoやGatsbyと同じく静的サイトジェネレーター(SSG)の一種．
言語はRustで書かれているため，buildが早いという特徴がある．
とはいえRustの知識は必要なくTeraについて知っていると少し書きやすい程度でブログを作る程度なら簡単に扱える．

制作物

https://slnq.github.io

ソースコード

https://github.com/slnq/slnq.github.io

ドキュメントに仕様などが詳しく書かれているため，これを見ていけば最低限のブログは作れる．
それでもわからない点は有志が作ったテーマのコードを見ることで大抵は解決する．
作ったブログはこれ．

デザイン

軽量かつシンプルでありトップページから全てのページにアクセスできるように作った．
特にページの要素を示すタグの一覧を見るために別のページにアクセスする労力を嫌い，タグの一覧をトップページに載せる仕様は絶対だった．
また，技術的な内容と日記などの文章を主体とする記事の両方を書きたかったので2つのカテゴリに分けられるようにした．
レイアウトについては日光室を参考にしている．
タグに用いている記号については4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説にて紹介されている手法を用いた．

ディレクトリ構成

templatesディレクトリにMarkdownからレンダリングされる元となるHTMLが配置されている．
全てのページで使われているヘッダー部分はbase.html，トップページはindex.html，記事はblog-pages.htmlを使っている．
また，sassにはスタイルシートが，contentには書いたMarkdownが配置されている．

Taxonomies

Taxonomiesの実装に躓いたのでメモを残す．
特に既存のテーマではタグやカテゴリの一覧を単独のページにしており，私の希望であった

  • タグの一覧をトップページに載せる
  • トップページで投稿を2つのカテゴリに分ける

という仕様はコピー・アンド・ペーストでは実装できなかった．

1つ目についてはtemplatesディレクトリ内にtagsを作成しTaxonomiesを実装しbase.htmlに

{% set tags = get_taxonomy(kind="tags", lang=lang) %}
{% for term in tags.items %}
  {{ term.name }}
{% endfor %}

と記述することで実現できた．コードは簡単のためtagsに関係ない部分は省略している．
get_taxonomyでtagsを取得しtags.itemsの全てを表示している．

2つ目については1つ目と同様にcategoriesを作成しindex.htmlに

{% set section = get_section(path="post/_index.md") %}
{% if paginator %} {% set pages = paginator.pages %} {% else %} {% set pages = section.pages %} {% endif %}
{% for page in pages %} {% if page.taxonomies.categories %} {% if "tech" in page.taxonomies.categories %}
      {{ page.title }}
{% endif %}{% endif %} {% endfor %}

と記述することで実現できた．コードは簡単のためcategoriesに関係ない部分は省略している．
paginator.pagesやsection.pagesでcategoriesを取得しpage.taxonomies.categoriesが存在しており"tech"が含まれている場合にpage.titleを表示することで2つのカテゴリに分けられている．Teraの仕様で

{% if page.taxonomies.categories == "tech" %}

とは書けない．

Zennへの転載

この記事もだが技術系のものについてはZennにも投稿したいと考え，Markdownのレンダリングを整えるために

{{ page.content |
   linebreaksbr |
   replace(from="</p><br><p>", to="</p><p class='br'></p><p>") |
   replace(from="<br><a", to="<br \><a") |
   replace(from="<br><c", to="<br \><c") |
   replace(from="<br><", to="<") |
   safe}}

と書いている．
linebreaksbrでMarkdownの改行を<br>にし，replace(from="</p><br><p>", to="</p><p class='br'></p><p>")
で二連続の改行を使えるようにし，replace(from="<br><a", to="<br \><a")などでaタグやcodeタグの改行を消さないようにした後でreplace(from="<br><", to="<")で改行しすぎる事を防いでいる．もっと賢いやり方はあるのだろうが頭が悪いので力技を使っている．
これでZennとだいたい同じ感じでMarkdownを良い具合にHTMLに変換できていると思う．

デプロイ

今回はGitHub Pagesを使った｡
公式ドキュメントに沿えば良いのが,知識不足と英語の苦手が故にまごついた部分があったので以下に手順を示す．

  1. user icon>Settings>Developer setting>Personal access tokens (classic)にて Generate new token(classic) を行い public_repo のみに印を付け発行されたtokenをコピーする．
  2. repositry>Settings>Secrets>ActionsにてNameにTOKENと書きSecretには先程コピーしたtokenをペーストする．
  3. /config.tomlをbase_url="https://'user_name'.github.io/'repository_name'"と書き換える．
  4. git pushした後でrepositry>Settings>Pages>SourceがDeploy from a branchでありrepositry>Settings>Pages>Branchがgh-pages /(root)になっている事を確認する．

所感

かなり良いブログができたなと思っている．
特に色彩とレイアウトはかなり気に入っているが，まだ改善の余地はあると感じている．
最も改善するべき点はコードブロックなのだろうが，具体的な仕様が思いついていない．

Discussion