自分のページを作るなら最近は Hugo がいいよって言われたのですが、が、せっかくなら最近勉強している Rust のツールがを使いたいという気持ちで、先に Rust 製の 「Zola」の使い勝手がどんな感じなのかを確認してみました。
What's Zola
https://www.getzola.org/
ざっくり見た感じ、依存関係に悩まされず単一バイナリで動作するっぽいです。その他ざっくり読んだ特徴は以下
- 依存関係
- 平均 1 sec 以内にビルド完了
- ファイルとして出力するので、サーバーや DB の運用がいらない（これは Zola のメリットというより、SSG のメリット）
- コマンドラインからの操作
- 使い道として、HP だけでなく、ランディングページや、ナレッジベースととしても使えるし組み合わせて使えるとのこと
- Augmented Markdown という Markdown 向けの構文があるらしい
使い勝手については記載がなかったので、「Get Started」から開始してみましょう。
セットアップ
https://www.getzola.org/documentation/getting-started/overview/
公式を見ながら、使用感を確認します。
今回は、いい感じのパッケージがなかったので、手動ビルドを行いました。
Rust のインストールはこちらのコマンドを実行します。
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source "$HOME/.cargo/env"
次にパッケージを Clone します。
sudo dnf install git -y
git clone https://github.com/getzola/zola.git
ビルドには C ビルド環境と libsass が追加で必要となるため、これもインストールします。
sudo dnf install gcc gcc-c++ -y
ビルドしたパッケージは今回は/usr/local/bin/に突っ込むことにします。
cd zola/
cargo build --release
cd target/release
sudo cp zola /usr/local/bin/zola
動作確認
どうやら、 Zola は他の SSG と異なりサイトの構造を推測しないらしい。他の SSG がわからないのでここはとりあえず使ってみます。
zola init sample
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://example.com
> Do you want to enable Sass compilation? [Y/n]: Y
> Do you want to enable syntax highlighting? [y/N]: Y
> Do you want to build a search index of the content? [y/N]: Y
Done! Your site was created in /home/ec2-user/sample
インタラクティブにページ作成されるので、一旦適当に埋めます。
どうやらローカルホストで確認できるようなのでデフォルトの見た目を確認。
zola serve
これだと 1111 ポートになるためポート変更と外部からの接続を許可したい、コマンドを確認するとどうやらそれようのオプションがある模様。
Well-known なポート変更には管理者権限が必要になる記憶なので、 sudo を使用しました。
sudo zola serve --port 80 --interface 0.0.0.0
確認完了。が、かなり簡素なため、簡単なテーマの適用をやってみることにします。
ページの編集
https://www.getzola.org/documentation/getting-started/overview/#home-page
こちらを参考にファイルを作成していきます。
vi templates/base.html
vi templates/index.html
これらはテンプレートなので、具体的な内容（コンテンツ）は別に配置するようです。
次にコンテンツとそれを表示するテンプレートを作成していきます。
cd content/
mkdir blog
vi blog/_index.md
TOMLフォーマットはあまりまだ馴染みがないが、おそらく YAML っぽい感じの記載なんじゃないかという理解で進める。
+++
title = "List of blog posts"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++
同時に、表示するための blogページを作成します。
vi templates/blog.html
一旦、現時点でのファイル構成はこんな感じです。
.
├── config.toml
├── content
│ └── blog
│ └── _index.md
├── sass
├── static
├── templates
│ ├── base.html
│ ├── blog.html
│ └── index.html
└── themes
再度表示
sudo zola serve --port 80 --interface 0.0.0.0
domain/blog/で、ブログページが表示されることがわかりました。
最後に、ブログコンテンツを作成してみます。
vi content/blog/first.md
vi templates/blog-page.html
メインの blog.html にコンテンツがすぐ追加されている仕組みなので、確かに雑にブログを記述する分には便利そうです。
感想
一通りやってみて概要は把握できました。
確かに SSG に必要な機能は一通り揃ってそうな一方特筆すべき点はビルド時間なので、テンプレートの充実具合とかで他と比較する感じになるかなーと思います。
実際に使うかどうかは Hugo を使ってみてから判断することにします。
Key words
SSG
自分の理解では、テンプレートと素材データ（文章や画像）から、静的なWebページを作成するツールという理解です。ここでいう「静的」とは、 PHP のようにサーバーサイドで処理を行わないという意味です。そのため、 生成したコンテンツを Netlify だったり、GitHub Pages だったり、 Amazon S3 だったりにアップロードすることで簡単に公開できるという利点があります。
Sass compilation
CSSを拡張した言語ということ。ラッパーだったり、ジェネレータだったりというイメージだろうか。とにかく生のCSSが使いにくいから、一旦ジェネレータのようなものをイメージ。
Links