2026/02/22、記録
今日はNotionNextからMizukiへ移行しました。
====
Mizukiに乗り換える理由は、おおむねNotionNextの制限があまりにも厳しすぎるからです。いまやVibe Codingがこれほど発展しているのだから、自由に少しだけ調整したいという思いもあります。
実は最初はHexoやInneiを試してみようと思っていましたが、偶然 Mizuki の動画を見つけて、まずは試しに乗り換えてみることにしました。機能はそれほど重くなく、個人とプロジェクトのバランスにも良い感じだと感じました。
それでは以下に、私がNotionをブログ保存として使用してMizukiへ移行した記録の概略を記します。
Mizukiのデプロイ
MizukiはAstroをベースに開発されたブログフレームワークです。正直なところ、以前はWordPress/Hexo/NotionNext などの自前デプロイ型ブログをいくつか扱ってきましたが、外見を大まかに見てテーマが良いと感じたので乗り換えようと考えました。もちろん今回も例外ではありません(
今回切り替えを選んだ主な理由は、Mizukiには日記機能があり、軽いつぶやきのニーズを満たせることと、プロジェクトを紹介する場所があることです。Astroはやはり一般向けのテーマなので、Vibeを使いたい場合には素材も比較的豊富でしょう。というわけで乗り換えました(ただし困難にも直面しました(笑))
Mizukiの設定
大まかな設定自体には特に難しい点はなく、公式ドキュメントに従って設定すればよいです。
注意すべき点は、投稿と自己紹介ページの内容はMarkdownを修正して制御しますが、日記・プロジェクト・タイムラインといった他の内容は、TypeScriptのdataを変更して制御します。
さらに面白い点として Bangumi の API(/v0/users/{userId}/collections)に接続してユーザーの番組履歴を取得することができます。取得タイプを少し変更してBangumiのトークンを設定すれば、エロゲーのコレクションリストが表示できるようになります。その後、アニメのページを少しだけ変更すれば、エロゲーの記録ページが新しく登場します(坑を掘る)
個人設定
次に個人設定についてです。Notionの内容をCIでリアルタイムにMizukiに同期させる予定があるため、Mizukiはブログの内容と構成を分離して記述することをサポートしています。そのため、コンテンツのリポジトリで手を動かして、構造をシンプルにして編集をかなり楽にしました。
大体変更を加えようとしているのは2つの部分です。CIを通じてNotionの執筆内容を同期し、Notion同期の文章をLLMで前処理して多言語対応を実現します。
Notion内容をCIで同期する
正直言えば、Notion の内容更新状況を定期的に照会するCronを作るということです。ただしNotion APIの通信速度を考えると、2日も経たずGitHub Actionsの実行枠を使い果たしてしまうのではないかと思い、この同期アクションをセルフホストで実行することにしました。
具体的な実装は特に難しくなく、Notion データベースの内容を取り出し、投稿・自己紹介ページ・日記のような異なるタイプのコンテンツを1つのタイプに振り分け、Notion データベースのカラムと前述の各コンテンツの具体的な設定を対応させる、という流れです。あとは自然に成り立ちます(雰囲気を整える意味です)。
ただし小さな落とし穴があります。Notion のヘッダー画像のリンクの一部は実際には1時間で期限切れになるURLです(Notion が画像保存に AWS S3 を使っているとは思いませんでした。R2 のほうが容量が大きい気がします)。なので、外部ストレージに永続化する必要があります(実際には R2 で十分です)。ただNotion画像を追加する際に直接URLを使うと、取得しても上記の画像リンクのままになります。ですので、事前に画像を更新しておけば、これほど大きな問題にはなりません。
具体的な実装はおおよそここを参考にできます: NotionSyncAction( Mizuki-GitHub のリポジトリをどう使うか試してみるにはちょうどよいです)
LLMを用いた多言語対応
実は Notion同期CI の前に、Mizuki のフレームワーク部分にも少し修正が必要でした。現状はブラウザ言語に追従して表示言語を切り替える機能がまだ実装されていないため、少しだけ変更しました(.en.md/.ja.md のような拡張子を持つファイルを多言語対応へ取り込む形です。元々静的サイトを前提にしたフレームワークなので、多言語UIを追加するには大幅な改修が必要になるかもしれません)。この種の多言語切替の実装は様々なプロジェクトでかなり見かけるので、雰囲気だけ説明しておけば十分です。
そしてCIにLLM翻訳モジュールを追加します。
実際にはほぼ同じです。一般的な翻訳のプロンプトに、簡単なAPI呼び出しを組み合わせて、雰囲気を整えるだけで動作します。ただし長文のLLMの応答時間が長くなることがあるので、実際のリクエストのタイムアウトを少し調整する必要があります。
結び
大体はこれくらいです。深い変更はあまりしていないので、個人的な設定方針を大まかに述べます。
現在CIの設定が完了したので、出力のフローが多少スムーズになったと言えるでしょう(
ただし将来的に多言語UIへ対応するのは大きなハードルだと感じます(
この記事が役に立ったときは、ぜひ他の人に共有してください!
一部の情報は古い可能性があります





