Rust製SSGのZolaでブログを構築する。

2020-12-28

この記事は、Jamstack Advent Calendar 2020の19日目の記事の転記です。元記事はこちら

自分は、普段フロントエンドエンジニアとして実務では主にNuxt.jsを使って開発しており、個人ではNext.jsやGatsby.jsなどで開発しています。今回は、少し前から気になっていたZolaというRust製の静的サイトジェネレーターを実際に試してみて簡易ブログを作成してみました。

作成したものはNetlifyにデプロイしています。リポジトリはこちらです。

前提

Zolaとは、Rustで作られたSSGになります。JekyllやGoのHugoみたいなものです。Rust製とは言っても実際にRustを触ることはなくTeraというテンプレートエンジンを使用して開発していきます。phpのtwigファイルみたいなものです。

特徴

Zolaのトップページに記載されている通りですが、

依存関係が一切ない
ビルドが高速
CLIがあり開発ライク

という点が挙げられます。上記の点については、後述します。

Zolaの導入

自分はmac環境だったのでHomebrewでインストールしました。

brew install zola

他のOSについてはこちらを確認しましょう。

対話形式でベースとなるURL、SCSSのコンパイルやシンタックスハイライトの有無を聞かれるので、各自で設定していきます。

開発サーバー

Zolaをインストールするとzolaコマンドが使えるようになるので以下コマンドを実行します。

zola serve

ディレクトリ構成

構成はとてもシンプルで以下のようになっています。

├── config.toml ## zolaの設定ファイル
├── public ## ビルドされたファイル
├── content ## htmlと紐づくMarkdownファイルなど
├── sass ## scssファイル
├── static ## ファビコンなどの静的なコンテンツの置き場
├── templates ## ページを構成するhtml置き場
└── themes ## 提供されているサイトのテーマなどを格納する場所

基本的にはtemplatesフォルダ内のindex.htmlにページのベース情報を記載していきます。

ベースとなるHTML

今回作成したhtmlは以下のようになりました。

{% extends "base.html" %}
{% import "blogs.html" as blogs %}

{% block title %}
    <title>Exsample Zola Blog</title>
    <meta name="description" content="Exsample Zola Blog">
{% endblock title %}

{% block content %}
    {% for page in paginator.pages %}
        {{ blogs::article(page=page) }}
    {% endfor %}
{% endblock content %}

これが前提の所で記載したTeraというテンプレートエンジンです。フロントエンドエンジニアからしてみると、少し前にあったejsみたいな構文だなという感想です。一番上でbase.htmlを継承してblogs.htmlというmainタグの中身をマークアップしたものをインポートしています。

ブログ部分を構築

contentフォルダに階層を用意して_index.mdという名前でMarkdownを用意します。_index.mdは、Zola内でどのような振る舞いをするのかを設定できるファイルのようなものです。Markdown内でTOML形式という構文が使用できます。

コンテンツ直下のファイルはこんな感じ

+++
sort_by = "date"
transparent = true
paginate_by = 10
+++

ブログを表示する時のソートキーは日付で10記事を超えたらページネーションをつけるなどの設定ができます。

実際のブログを記載するMarkdownは通常のindex.mdを作成して記述することができます。前述したリポジトリを見ると関係性がわかるかなと思います。

他ページの作成

今回はListとAboutというページを作りました。htmlを用意するだけでは表示することができず先程のcontentフォルダに同様の階層を作ってあげて_index.mdを置きます。

+++
template = "list.html"
sort_by = "date"
+++

templateという箇所に表示させたいhtmlを記載すると表示することができます。

デプロイ

NetlifyがZolaのビルドに対応しています。ここに書いてあるとおり設定ファイルを用意してNetlify側の設定をポチポチすればmainブランチにmergeされたタイミングで自動デプロイすることが出来ます。

使ってみての感想

node_modulesがないからパッケージ管理不要！

当たり前ではあるのですが、依存関係やバージョン管理が一切不要でブログをサクッと作れるのはかなり楽でした。JavaScriptを普段触っている身としては、package.jsonのdependenciesとdevDependenciesを綺麗に保ちたいという気持ちが働きますが、そういう事が苦手な方はとても良いと思います。

CLIがあるので環境構築も不要

これも利点です。コマンドを2つ叩けばすぐに開発できるのはデベロッパーにとってありがたい限りです。

ビルドがめちゃくちゃ速い

実際にNetlifyにビルドしていますが、mainブランチにmergeしてすぐNetlifyの管理画面からコンソールを見に行くと既にビルドが終わっています！！

普段自分のブログはGatsby.jsを使っているのですが、それと比べると圧倒的な速さでビビります。Netlifyのプライシングを見ると無料プランでビルド時間が月に300分までとなっているのでビルド時間を気にする方にはオススメかもしれません。（まあ個人で運用しているGatsby.jsブログでも300分を超えたことはないのですが。。）

Teraの構文を学ぶ学習コストが高い

これが一番辛かったです。。

初めて触る構文なので、ドキュメントを見ながら使えそうなものを探したり、既にzolaでブログを作られている方のソースコードを見たりしながら開発していました。幸いドキュメントは比較的読みやすいので何とかはなりますがこれを学ぶ学習コストはとても高いなと思いました。

おわりに

フロントエンドエンジニアでスピード重視を考えるなら、普段から使用しているNext.js/Nuxt.jsなどで開発する方が圧倒的に効率が良かったです。ただTera構文さえ習得してしまえば、構成はZolaの方がシンプルですし、何より高速なのでその点だけでも試して見る価値はあるなと思いました。