Zola + Cloudflare Pages でブログを作った ~ Zola編 ~

はじめに

今回、学習のアウトプットをすることを目的として個人ブログを作ることにしました。ブログを作成するにあたり、動的なコンテンツもないので静的サイトジェネレーターを使うことと決め、Rust 製の Zola と Cloudflare Pages を使って作ってみましたのでメモを残します。

Zola

Zola¹ は Rust 製の静的サイトジェネレーターです。 このジェネレーターには次のような特徴があります。

• シングルバイナリで依存関係なしで実行できる
• ページの生成が高速
• Jinja2²、Liquid³、Twig⁴ に似たTera⁵ テンプレートエンジンが使われている

静的サイトジェネレーターはページが増えてくるとビルド時間が伸びていく傾向があるため、高速に生成できる Zola を採用しました。個人的に Rust が好きということも選定理由の一つです。

Zola インストールから記事の作成までざっくりとメモしていきます。

インストール

Zola は Mac / Linux / Windows で利用でき、ビルド済みのバイナリが GitHub のリリースページで提供されています。執筆時点での最新バージョンは v0.18.0 でした。

今回は Mac にインストールしたいので brew を用いてインストールします。インストールコマンドは次のとおりです。

brew install zola

他にも公式ドキュメントにインストール方法がまとまっているので詳細はそちらを確認してください。

プロジェクト作成

コマンドのインストールが完了したらプロジェクトを作成します。

zola init {プロジェクト名}

このコマンドを実行するといくつか質問が表示されるため、それぞれ答えていきます。

> What is the URL of your site? (https://example.com):

本番環境で使うドメインを設定します。

> Do you want to enable Sass compilation? [Y/n]:

Sass コンパイルを有効にするかどうかを設定します。

> Do you want to enable syntax highlighting? [y/N]:

シンタックスハイライトを有効にするかどうかを設定します。

> Do you want to build a search index of the content? [y/N]:

elasticlunr⁶ 等の検索ライブラリ向けインデックスを作成するかどうかを設定します。

これらの質問に答えると次のようなディレクトリ構成のプロジェクトが作成されます。

├── config.toml
├── content/
├── sass/
├── static/
├── templates/
└── themes/

次にそれぞれのディレクトリの役割について簡単に説明します。

config.toml

TOML形式のプロジェクト設定ファイルです。どのような値を設定できるのかについての詳細は configuration documentation を参照してください。

content ディレクトリ

このディレクトリにはサイトのコンテンツとなるページ（.mdファイル）を格納します。このディレクトリ内のファイル・ディレクトリ構造がサイトの URL 構造を決定します。

参考: https://www.getzola.org/documentation/content/overview/

sass ディレクトリ

コンパイルする対象の Sass ファイルを格納するディレクトリです。Sass 以外のファイルは無視され、ディレクトリ構造はコンパイル後もそのまま引き継がれます。hoge/fuga/piyo.scss のような構造があった場合、hoge/fuga/piyo.css にコンパイルされます。

static ディレクトリ

あらゆる種類のファイルを格納できます。このディレクトリのファイル・ディレクトリ構成はそのまま出力ディレクトリにコピーされます。

templates ディレクトリ

サイトをレンダリングするために使用される Tera⁵ テンプレートを格納します。いくつか組み込みで使用できる変数が定義されていますので詳細はドキュメントを確認しくてください。

themes ディレクトリ

Zola にも他の静的サイトジェネレーター同様テーマを使用することができ、公式サイトにまとめられています。テーマを使用する場合はこのディレクトリにテーマを格納していきます。テーマを使用しない場合はディレクトリは空で問題ありません。

ページ作成

サイトのコンテンツは content ディレクトリ内に .md ファイルを置くことで作成することができます。また、ディレクトリ構造がそのままURL構造を表します。ファイルの命名・ディレクトリ構成に関するルールがいくつかあるため詳細は公式ドキュメントを確認してください。

ここではブログの記事を書く場合の解説を行います。

例として {サイトURL}/hoge という投稿を作りたければ content/hoge.md ファイルを置くことで作成することができます。プレフィックスとして YYYY-mm-dd または RFC3339 の日付を _ もしくは - でファイル名の先頭につけても作成することができます。

デフォルトの設置では content/2024-03-04-hoge.md のようなファイルを置いた場合 URL としては {サイトURL}/hoge として扱われます。

例として 2023-03-04-hoge.md を次のように作成したとします。

+++
title = "test"
sort_by = "date"
slug = "fuga"
description="テスト記事です"
date="2024-03-04"
auther="s4it0"
[taxonomies]
tags=["testtag", "testtag2"]
categories=["test"]
+++

## 記事内容
本文がここに入る本文がここに入る本文がここに入る本文がここに入る

.md ファイルの先頭に +++ で囲まれた TOML front matter と呼ばれるメタデータを書く必要があります。

このメタデータ内に記事タイトルや作成日、カテゴリ、slug などを記載することができ、メタデータ内に記載された slug の値は .md のファイル名より優先して URL の指定に使われます。

つまり、content/2023-03-04-hoge.md は {サイトURL}/hoge として解釈はされるが、メタデータの slug で fuga と指定されているため最終的には {サイトURL}/fuga として出力されることになります。

TOML front matter のデフォルト値の詳細は公式ドキュメントにまとめられているので確認してください。

開発サーバーの実行

ローカル開発サーバーを立ち上げるためのコマンドも内蔵されており次のコマンドを実行することでサーバーを立ち上げることができます。

zola serve

デフォルトで立ち上げた後は http://127.0.0.1:1111/ でアクセスできます。すでにポートが使用されている場合は違うポート番号で立ち上がる可能性があるため、コマンド実行後にターミナルに表示される URL にアクセスして確認してください。

まとめ

ここまでで Zola でプロジェクトを作り、開発サーバーを立ち上げ記事を書いていくところまでの情報はメモできたと思います。 Zola は依存関係もなく、バイナリひとつインストールしてしまえば開発サーバーの立ち上げやビルドも可能で、作成されるプロジェクトもスッキリしていてわかりやすい印象です。 Rust 製ということもありページのビルドも高速で、大量のページをビルドする際も短時間で済むでしょう。(このサイトのコンテンツ量がビルド時間を気にしないといけないような規模になるかはわかりませんが...) 次の記事は Cloudflare Pages にデプロイするまでの流れをまとめられればと考えています。