ブログを自作システムへ移行しリニューアル

このたび「クロの思考ノート」を自作のブログシステムMutsuraに移行しました。API,管理画面まで含めての自作システム化は長年やりたいと思いつつ時間が取れずに躊躇していた問題でした。まだ仕様の確定も含めて完成にはほど遠い状況ですが、ある程度形になったので実戦投入し使ってみることにしました。

Mutsraの紹介

MutsuraはAPI, 管理画面, フロント(ブログサイト)の３つから構成されています。

  • mutsura-api: ブログシステムのバックエンド(Rust + Axum)
  • mutsura-admin: 管理画面SPA(React)
  • mutsura-front(公開予定): ブログサイト(SvelteKit)
管理画面
Mutsura管理画面のダッシュボード

Mutsuraの名前は天体の昴の別名「六連星（むつらぼし）」に由来します。独立したプログラムが集まり一つの機能を果たす、そんなプロジェクトになって欲しいという思いを込めました。

大きな特徴は日本語と英語のバイリンガルシステムです。日本語のみでも発信できますが、英語版を同時に発行することが可能です。同一記事IDで２つの言語を扱うというのはWordPressでも難しく(少なくとも通常の使い方では)、ヘッドレスCMSでマルチ言語対応のものもありますが、自分にとって使い勝手がよくカスタマイズ可能なシステムでブログが書きたいと思い自作しました。

簡単に紹介すると以下のような特長があります。

  • 日本語と英語の２か国語に対応し、記事を一元管理できる
  • バックエンドとフロントが粗結合であり、フロントを自由に作成可能
  • 記事だけでなく固定ページも管理可能
  • APIはSSG対応の設計
  • JWTとrefresh tokenによる認証方式
  • 管理画面はシンプルなデザインのSPA
  • 記事にはカテゴリーとタグを付与可能
  • 気軽に記事が書けるMarkdownエディターつき管理画面
  • 検索画面のみをSPA化したSSG方式のフロント
  • フロントはシンプルなレスポンシブデザイン
  • Shikiによるコードのシンタックスハイライト
  • RSS2.0, Atomフィード、サイトマップ対応

いろいろ書きましたが、私が日頃ブログに欲しいと思っていた基本的な機能は一通り入れたつもりです。これぞ自分が欲しいシステムを自作する醍醐味ですね。mutsura-api + mutsura-adminでヘッドレスCMSとして利用できるので好みの分かれるフロント部分は自作するなどの柔軟な使い方ができると思います。

ソースコードはGithubからアクセスできます。

なぜブログシステムを作ったのか

私自信はこのブログをGoogle Bloggerで始めて独自ドメインに移行してからはWordPress, Astroによる自作サイトと移行を続けながら、独自ドメインでブログを運営することに拘ってきました。自分が記事を発表する場を外部に依存していると、そのサービスが終了 した時に移行しないといけないですし、何より筆者のようなインターネットに古くからいる人間にとっては「ドメインのコンテンツはドメインのもの」という意識がとても強かったです。外部のサービスに記事を書いても、それは結局外部サービスのコンテンツを充実させただけで自分のものにはなっていないという気持がありました。

今更ブログシステムを自作するなんて無駄だという意見もあると思います。世界には多くの人に選ばれる記事を書き発表するためのサービスやツールがたくさんあります。ブログという手段を使わなくても記事を発表することは容易です。日本国内のサービスに限っても以下のようなアカウントだけ作ればすぐに記事が書けるシステムが豊富にあります。

  • note
  • hatena blog
  • Zenn
  • Qiita

また、セルフホスティングタイプのブログツールとしても

  • WordPress
  • Hugo
  • Astro
  • Perican

など、有名なツールを上げればキリがありません。このような状況のなかで自作のブログシステムを手間をかけて作るなんて時間の無駄だと感じる方も多いと思います。しかし、筆者は自分が思いどおりにカスタマイズできて細部まで把握できている自分だけのオリジナルなブログシステムが欲しいと考えてきました。最近はAstroで構築したブログシステムにmarkdownファイルで記事を書いてきましたが、日本語記事だけで300を越え、さらに対応する英語記事の管理をmarkdownファイルで管理するのは容易ではなく、フロントエンドでの記事検索機能にも不満がありました。そこで記事のデータベース化とバックエンドの構築に着手したのです。

実は過去にもブログ用のバックエンドを作ったことはありました。kurologという個人用SPAブログのためのバックエンドで、バックエンドでAtomフィードやsitemapも生成しSPAながら特定のSNSにはOGPも動的に対応するというもので、Haskellで書きました。今回もkurologを活かすことも考えましたが、

  • DBにはMongoDBを使ってみたい
  • ２か国語に対応するシステムにしたい
  • Rustで本格的な開発がしたい
  • SSG + SPA構成のブログにしたい

ということで設計からやり直すことにしました。

Mutsuraに使われた技術

以下に簡単に今回のプロジェクトで用いた技術を記載します。

項目 説明
データベース MongoDB
バックエンド記述言語 Rust
Webフレームワーク Axum
フロントエンド記述言語 TypeScript
管理画面の利用ライブラリ React
フロントのWebフレームワーク Sveltekit
シンタックスハイライト Shiki
Markdown処理 markdown-it
デプロイ環境 Docker
コンテナオーケストレーション Docker Compose

移行した感想

今のところ概ね満足しています。まずMarkdownファイルで日本語記事と英語記事の管理をすることから解放され、オンライン上の管理画面でブログの執筆ができるようになったことでブログを書く手軽さが向上しました。また、APIを作ったことでバックエンドによる検索が可能となり、やや不満に思っていたフロントエンドでの記事検索から解放されました。

まだ当初構想していたものが完全に実装できたわけではありませんが、足りない部分は追って機能追加して行こうと思っています。

最後に

時間を見つけながら少しづつ作ってきたシステムにようやくブログを移行できました。AIコーディングが話題であり、今回のシステムもAIによるバイブコーディングで作成することも考えたのですが、筆者は自らがコードを書きながら試行錯誤することが楽しい人間であり、まだまだコードを自分で書きたいと考えているので、今回はAIコーディングは一部に留め、大部分を自らで書きました。自分が使うシステムを自分で開発、改修しながら使えるというのは本当に幸せなことだと考えています。

今後も「クロの思考ノート」をよろしくお願いいたします。