以前にblogをastro+cloudflareで作成したが、zola+cloudflareで作り直した。astroでも問題なく運用できていたのだが、依存周りを減らしてシンプルにしたかった。またプライベートではRustでコードをよく書いているのでRust製のサイトジェネレータであるzolaを使ってみたかったのも理由である。今回zolaに移行するにあたっておこなったことや所感などを記載する。
zolaとは
zolaはRustで書かれた静的サイトジェネレータである。テンプレートエンジンは同じくRust製のTeraになる。 マークダウンで書かれたテキストや動的なテンプレートを静的なHTMLページに変換することができる。またGithub Pagesや今回ホスティングしたcloudflare pagesにサポートされているので簡単にデプロイすることができる。
zolaへの移行
今回の移行にあたり、使用しているzolaのバージョンは現時点で最新の0.18.0である。またホスト先は今回もCloudflare Pagesへホスティングをしている。基本的にはzolaのドキュメントとzolaが使用しているhtmlテンプレートエンジンであるTeraのドキュメントを読んで構築した。現行ブログからの移行のために変更した箇所やハマった部分を下記に記す。
pathの設定
zolaのドキュメントのサンプルではブログのpathは/blogとなっているが、もとの自分のブログのpathはpostsにしていたので、それに合わせてpathを設定した。具体的にはドキュメントのcontentディレクトリではblogフォルダにている箇所をpostsフォルダに変更した。詳細なpathの設定方法や仕組みについてはドキュメントを参考してほしい。
resize_imageのpathの設定
記事で画像を使用する場合、以下のように記事ごとにディレクトリを作成して使用する画像を設置し、どの画像がどの記事に使われているか管理しやすいようにしている。
content
├── _index.md
├── about.md
└── posts
└── tmux-start-script
├── index.md
└── tmux.png
この場合、画像をそのまま使用する時は<img src="tmux.png">のように相対パスで指定できるのだが、zolaの機能のresize_imageで画像をリサイズする場合は画像のpathの検索pathが違うので注意が必要である。記事
リサイズした画像はいろいろな記事で使うと思われるのでzolaの機能であるshortcodes機能で使いまわせるようにしている。
<!-- templates/shortcodes/artice_image.html -->
{% set image = resize_image(path=path, width=width, height=height) %}
<img src="{{ image.url }}" />
markdownの記事で下記のように使用
article_image(path="@/posts/tmux-start-script/tmux.png", width=750, height=400)
cloudflareへのデプロイ
zolaのドキュメントにcloudflareにデプロイするための方法が記載されているのだが、Step-by-Step通りに行うとデプロイ時にエラーになってしまう。cloudfrareのビルドシステムがV2に更新されzolaがデフォルトで提供されなくなりデプロイ時にエラーになってしまうのが原因である。2024年５月地点ではまだ解消されていないので、ドキュメントのトラブルシューティングに記載されているように、デプロイするにはビルドシステムをV1で指定して行うか、環境変数UNSTABLE_PRE_BUILDをセットして値に下記のようにzolaをインストールしてzolaのbuildコマンドを使えるようにスクリプトを実行する必要がある。
asdf plugin add zola https://github.com/salasrod/asdf-zola && asdf install zola 0.18.0 && asdf global zola 0.18.0
リダイレクト処理
ルートページを/postsにリダイレクトしている。zola側でリダイレクトの設定をすることもできるが、今回はcloudflare側でリダイレクト設定を行った。cloudflare側でリダイレクト処理を行うには_redirectsファイルを作成し、設定したいリダイレクトの内容を記載し、ビルド出力ディレクトリに置く必要がある。zolaの場合は出力フォルダはデフォルトではpublicフォルダになる。zolaのstaticフォルダはファイルを置くとそのままpublicフォルダにコピーされるのでstaticフォルダに下記内容を記載した_redirectsファイルを設置する。これでcloudflare側でリダイレクトが可能になる。
/ /posts 302
HTMLとCSS
今回ブログを作るに当たりHTMLとCSSの本を読み直した。以前のデザインのブログはテンプレートからそのまま使用していたが、自分で一から実装したくなったからである。
普段はサーバーサイドエンジニアとしてほとんどHTMLとCSSはふれることはなく、エンジニアを目指したときにさっと勉強しただけなので今回改めて読み直せて良かった。とくにCSSは自分が学んだ当時では当たり前に使っていたものが現在ではあまり使われなくなっているみたいでその辺を勉強し直せてよかった。もともとCSSは苦手意識があったのだが少しは解消された気がしている。
所感
前回のブログはテンプレートを少し修正してブログを構築していたが、シンプルなブログとはいえ一から作成できたことはとても勉強になった。zolaはとても使いやすく簡単にブログを構築できて良かった。また普段サーバーサイドエンジニアとして仕事をしているのでHTMLやCSSを触ることができて楽しかった。
せっかく自分のブログを作り直したのでこれを期にアウトプットを増やしてエンジニアとして成長していきたい。また、技術以外のことも投稿していきたい。