Rust 製の静的サイトジェネレーター zola を触ってみる。

こんにちは k-jun です。今回は静的サイトジェネレーター (static site generator) の一種である zola を試してみます。

ライバルは Golang の Hugo、Python の Plican あたりみたいですね。Rust で Golang を倒してほしい(願望)。

Install

$ brew install zola

Run

https://www.getzola.org/documentation/getting-started/overview/

ひとまず init を打ってみます。

$ zola init myblog

Welcome to Zola!
Please answer a few questions to get started quickly.
Any choices made can be changed by modifying the `config.toml` file later.
> What is the URL of your site? (https://example.com): https://k-jun.com
> Do you want to enable Sass compilation? [Y/n]:
> Do you want to enable syntax highlighting? [y/N]:
> Do you want to build a search index of the content? [y/N]:

Done! Your site was created in /Users/keijun.kumagai/source-code/myblog

Get started by moving into the directory and using the built-in server: `zola serve`
Visit https://www.getzola.org for the full documentation.
$ cd myblog/
$ zola serve

http://localhost:1111 にアクセスしてみると。

f:id:K-jun1221:20210904155949p:plain

何やらでてきますね。Document に従って base.html, index.html を追加します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyBlog</title>
</head>

<body>
  <section class="section">
    <div class="container">
      {% block content %} {% endblock %}
    </div>
  </section>
</body>

</html>

{% extends "base.html" %}

{% block content %}
<h1 class="title">
  This is my blog made with Zola.
</h1>
{% endblock content %}

extends により拡張されるようですね。便利なもんです。一旦 http://localhost:1111 を見てみます。

f:id:K-jun1221:20210904161617p:plain

ちょっと味気ない気もしますが、Theme で化けることを期待します笑。

では次に、Post を追加してみます。最初に Post の Top ページとそれぞれの Post まで一気に。

# blog.html
{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ section.title }}
</h1>
<ul>
  {% for page in section.pages %}
  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
  {% endfor %}
</ul>
{% endblock content %}

#_index.md
+++
title = "List of blog posts"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++

これで一覧ページが完成。Post が追加されると自動的に増えていく。詳細ページも作る。

# first.md
+++
title = "My first post"
date = 2019-11-27
+++

This is my first blog post.

# blog-page.html
{% extends "base.html" %}

{% block content %}
<h1 class="title">
  {{ page.title }}
</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}

この時点でアクセスしてみると。

f:id:K-jun1221:20210904162250p:plain

f:id:K-jun1221:20210904162324p:plain

良い感じですね。次に Theme を追加してみます。

Theme を追加とかうだうだやらなくても、Clone してそのまま zola searve すれば動きました笑。

$ git clone https://github.com/ejmg/zerm.git
$ cd zerm
$ zola serve

ではでは、最後にこの記事自体を Zola で生成させてみます。Markdown なのでうまくいくはず...!

f:id:K-jun1221:20210904165730p:plain

結構いい感じですね。それでは今回はこのへんで。