個人ブログの技術スタック 2025

2025-05-06

せっかく始めたので

個人ブログの技術構成について、いわゆる備忘録というものを残そうと思います。

大まかな手順としては、

  1. どのツールを使うか選ぶ
  2. リモートのGitでリポジトリを作成し、ローカルで参照
  3. ホスト先と連携するGitのリポジトリを指定、ビルドの設定
  4. あとは編集したファイルをGitにプッシュしていくだけ

となります。

構成

SSG（静的サイトジェネレーター）

簡単なブログならWordpressより管理が楽でしょうと思い、SSGを使ってみることにしました。サーバーを借りる手続きが必要ないので、思い立ったときに始められるのも良いです。

Markdown（と少しの拡張構文）を書けば、そのまま公開用のHTMLに変換できるので、一度設定してしまえば管理画面を開く必要がありません。また、元データがMarkdownと画像などのデータとしてそのまま手元にあるため、別の構成に移行したい時も楽なのがうれしいです。技術的な部分をクリアできるのであれば、SSGはかなりおすすめしたいと今回やってみて思いました。

選んだのはZola、テーマはsereneです。Rust製でビルドが早いというのが目立つ特徴であるものの、Rustのことをよく知らないので、シングルバイナリで導入と管理が楽というところに惹かれて採用しました。サイトの作り込みの面でも、シンプルな構成で記事を公開したい人向けの印象です。

サイトのテンプレートのパーツをhtmlファイルとして置いておく必要があり、例えば<head>内で読み込まれる<style>の内容を_custom_css.htmlで設定したりします。そわそわしますね。

テーマのsereneでは、デフォルトのアイコンとしてRemix Iconのものがいくつか設定されています。利用ガイドに「ファイルをコピーして使ってね」という説明があったので、とりあえずそのまま使っています。個人的に好きなLucideのアイコンに差し替えてみるか、自作してもいいかもしれません。

よく使うコマンド

  • zola init : Zolaを使ったブログを新規作成する
  • zola init blog_name : Zolaを使ったブログの名称をblog_nameに指定して新規作成する
  • zola serve --open --drafts : ローカルでライブサーバーを立ち上げ、サーバーのURLをブラウザで開く、ドラフト（非公開）に設定している記事も表示する
  • zola build : サイトをビルドする（今回の場合、このコマンドはCloudflareに任せる）

他の実装の検討

シンプル志向のSSGだとHugoが候補に上がると思いますが、過去に一度試したことがあり、その時は結局あきらめました。HTMLのテンプレートやCSSなどの必要な設定ファイルを、どう変更してどこに置くのかよくわからなかった覚えがあります。Hugoを利用したサイトがたくさんあることを考えると、難解なことはないはずです……多分……。Hugoに対する一方的な苦い記憶から今回は採用を見送り、他の実装を探しました。

Astroは色々遊べて楽しそうなので悩みました。良い意味でSSGらしくない、アニメーションなどの見ていて楽しい演出を作り込めます。やり始めたら最後、そのまま着工状態で公開しないのが目に見えていたので、おそらく誘惑が少ないであろうZolaを選びました。掘り下げたらものすごい可能性を秘めているのかもしれませんが。

またObsidianユーザーとしては、やはりQuartzが気になりました。ぱっと見はほぼObsidian Publishです。今回やりたかったのはデジタルガーデンというよりは、長めの文章をぽつぽつと公開していく場だったので、採用は見送りました。公開する記事が多くなってきた時にもう一度考えてみます。

Git

GitHubです。他の候補を挙げるとすれば、GitLabやCodebergやセルフホストになると思います。今回の使い方だと、単なるリポジトリ置き場としてホスト先のCloudflareと連携できればよかったので、とりあえずで選びました。

リポジトリをプライベートに設定しているのですが、アクセストークンの生成のことを知らなかったので、リポジトリをクローンするときの認証で少し手間取ったのと、誰かのリポジトリへのプルリクエストでもないのに緊張しました。まだコマンドを覚えられていません。

git addとgit commitが別々なのって厳密すぎませんか？（大規模なプロジェクトだとそうでもないのかも）

よく使うコマンド

  • git init : 今見ているディレクトリをgitの監視対象に設定（初期化）、デフォルトのブランチ（例えばmain）を作成する
  • git branch main : 現在のgitのブランチ名をmainに設定する
  • git remote add origin https://example.com/repo_url.git : リモートのリポジトリhttps://example.com/repo_url.gitへの参照をローカルに追加し、その参照にoriginというエイリアスを設定する
  • git remote rename origin new_name : リモートのエイリアスであるoriginを new_name に変更する
  • git pull : リモートのファイルをローカルに上書きコピーする
  • git status : 監視対象のディレクトリ内で変更があったファイル一覧を表示する
  • git add -A : 監視対象のフォルダ内で変更があったファイルを、全てステージング（リポジトリにコミットする対象として設定）する
  • git commit -m "commit message." : メッセージを添えてローカルのデフォルトブランチ（今回の場合main）にコミットする
  • git push origin main : ローカルで参照しているorigin（のmainブランチ）に対し、ローカルのmainブランチの変更をプッシュする
  • git push -u origin main : -uのオプションを指定するとoriginとローカルのmainとの間に追跡関係が設定され、git pushやgit pullをするときに、リポジトリ名やブランチ名を指定しなくても自動的に補完されるようになる

ホスト先

追記（2025-05-06）

この記事を公開した直後に気がついたのですが、4月にCloudflareが公式に「今後はPagesからWorkersに移行してほしい」という発表をしていました。見落としていたので、私も移行作業をしようと思います……。

Cloudflare Pagesです。事前に紐付けしたGitHubのリポジトリに編集したファイルをプッシュすると、Cloudflare側で自動的にビルドされ、サイトとして公開されます。とても便利。Cloudflare側のビルドの出力ディレクトリ設定を、Zola側のconfig.tomlで設定したものときちんと一致させるという基礎的なところから、ビルドシステムをversion 1と明示的に指定する、というドキュメントをきちんと読もう事案まで、色々ありました。

サブドメインはPagesの管理画面から設定できます。

今後やりたいこと

Obsidian上でZola向けの変換を自動化したい

記事を書くにあたってObsidianを利用しています。バージョン1.8から標準機能としてWebビューワーが登場し、Zolaのライブサーバーを横に並べて表示できるようになりました。

一方で、Obsidianはドキュメントのメタデータを扱う際にYAMLを書く必要があり、Zolaが採用しているTOMLへの書き換えの作業が発生してしまいます。メタデータをLinterプラグインで整えるということもできません。

少し面倒なので、

  • YAMLをTOMLに変換する
  • コールアウトをZolaの形式に変換する
  • ブログ用のフォルダに書き出し

あたりがワンクリックでできるとかなり快適になります。

生成AIに「お願い〜」と言ったら変換してくれそうですが、フォーマットが決まったものを書き換えるだけなので、生成AIを使うまでもない気もします。勉強がてらObsidianの拡張機能を作ってみるのはありかもしれません（他のSSG実装向けの拡張機能はちらほら見かけますが、Zola向けのものがないのはなぜ……）。

Gitの操作をどこで行うか

Gitプラグインを使えば、編集 → 保存 → Gitの操作を自動化でき、ブログの更新作業をObsidian上で完結できます。ただ、このプラグインは保管庫全体の自動保存のために作られたものなので、ひとつのリポジトリしか操作対象に設定できません。Gitをバックアップ目的で利用したい場合は他のツールを選んだ方が良いです。最近の開発用エディタはコミットメッセージの生成機能があったりするので、それらを併用する方が何かと楽かもしれません。

ライブサーバーを立ち上げるときに結局ターミナルを使うのと、コマンドを入力する手間はそれほど変わらないので、Gitの操作はとりあえず自分でやろうと思います。

そんな感じ

わかったような口調で書いていますが、実際はよくわかっていません。間違っていたらすみません。

HTMLとCSSと少しのJavaScriptのみで構成されているサイトなら、相当な年月が経っても問題なく表示できるでしょう。