以前に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を触ることができて楽しかったです。
せっかく自分のブログを作り直したので、これを期にアウトプットを増やしてエンジニアとして成長していきたいです。また、技術以外のことも投稿していきたいです。