<h2>はじめに: AI前提のホームページの前提</h2>
<p>ホームページ作成がライフワークといえるほど、この20年以上、自分のホームページを作り直し続けてきました。フルリニューアルだけでも数十回はやってる気がします。</p>
<p>先日「<a href="https://zenn.dev/kentarok/articles/a421fa0e8e332e">Raspberry Pi上で動く書籍PDF検索エンジンを作ってDiscordボットとn8nと連携させてみた</a>」に書いた通り、Raspberry Piで書籍PDFの全文検索を作りました。その際、ローカルマシン上にためこんだファイルに対してAI技術を用いることの可能性を感じました。その後「<a href="https://note.com/shotovim/n/na1d91f10c1d0">メモ管理は Obsidian in Cursor が最強｜松濤Vimmer</a>」という記事を見て、やっぱり自分の知的生産に用いるためのデータはローカルにファイルとして持っておくほうがAIの支援を受けやすくて便利だという気持ちが強くなってきました。ローカルでいろんなAIモデルを動かしやすくもなってきましたしね。</p>
<p><a href="https://obsidian.md/">Obsidian</a>はこれまで何度か試してみたのですが、日頃メモというものを全然取らないので常用するにいたりませんでした。しかし、そんな自分にも毎日書いているものがあります。それは<a href="https://kentarokuribayashi.com/journal">日記</a>です。日記をどこでどのように書くかというのは、ホームページ作りと同じく長年の課題であり続けてきました。この問題が解決できるならObsidianをちゃんと使っていけそうです。</p>
<p>そこで、ObsidianをヘッドレスCMSとして使うことで、コンテンツはObsidianで管理し、Webサイトとしての表示部分は静的サイトとして実装すればよいのではないかと思いつきました。公開前提の日記や、この記事もそうであるようなブログを書きつつ、プライベートなメモもObsidianのみで管理できたら便利そうです。</p>
<h2>このホームページでできること</h2>
<ul>
<li><a href="/">トップページ</a>: プロフィールページの情報をAIエージェントにそれっぽくまとめてもらいました。</li>
<li><a href="/journal">日記</a>: 日記を時系列で表示したり、過去の同じ日の日記を振り返ったりできます。</li>
<li><a href="/blog">ブログ</a>: ストックしたいまとまった考えなどを書きます。</li>
<li><a href="/works">アウトプット</a>: note、YouTube、zennなど、様々なプラットフォームでの活動をまとめて表示しています。</li>
<li>個別ページ: いまのところ<a href="/profile">プロフィール</a>ページがあります。その後増えるかも。</li>
<li>全文検索: サイト内のコンテンツをキーワードで検索できます。</li>
</ul>
<p>Webサイトとしては特に変わったことができるわけではないのですが、コンテンツ管理をObsidianで一括してできること、静的サイトでありつつもわりと高速に動く全文検索がついていることあたりが、個人的には気に入っています。</p>
<p>ソースコードは<a href="https://github.com/kentaro/kentaro.github.io">kentaro/kentaro.github.io</a>に公開しています。Vibe Codingなコードで、これ自体を見てもあまり意味がなさそうですし（そういうコードを書くこと自体はどんどん簡単になっているし）、伝えたいのはアイディアについてなので、以下にポイントを書いていきます。</p>
<h2>ObsidianをヘッドレスCMSとして使う</h2>
<p><strong>やったこと：</strong></p>
<ul>
<li>ObsidianのデータをGitHubで管理（Gitプラグインを利用）</li>
<li>Obsidianのディレクトリ構成を公開用とプライベートなものとに分類</li>
<li>静的サイトビルダーをNext.jsで実装し、上記のリポジトリをsubmoduleとして登録</li>
<li>公開用のディレクトリのみをホームページのコンテンツソースとして利用</li>
</ul>
<p>Obsidianのディレクトリ構成は、以下のようにしました。特定のフォルダ（ここでは"public"にしてます）に置いたMarkdownファイルが、自動的にホームページのコンテンツになるようにしました。</p>
<pre><code>public/
  journal/YYYY/MM/DD/YYYY年M月D日.md
  blog/YYYY/MM/DD/タイトル.md
  profile.md

...

（publicディレクトリ以外はプライベートなメモ）
</code></pre>
<p>Obsidianのようなふだんから使うツール（僕は最近ちゃんと使い始めたのですが）がそのままCMSになるのは便利ですね。</p>
<h2>Wasm化されたRDBMSを用いてローカル全文検索する</h2>
<p><strong>やったこと：</strong></p>
<ul>
<li>ビルド時にコンテンツから検索用に用いるデータを生成</li>
<li>ブラウザ上で動くRDBMSにSQLクエリを実行し、全文検索を実現</li>
</ul>
<p>これは主に自分自身にとって便利な機能です。たとえばこんなことがありました。ここ数日で花粉症がひどくなってきたので日記を検索したところ、昨年も同じぐらいの頃に同様のことが起こっていたようでした。また、そうなると気分が沈みがちなので、これまでの事例に基づいて、気の持ちようをコントロールすることができます。</p>
<p>ところで、ブラウザ上で完全にローカルで全文検索を実現するというのは、20年前から行われていたことではあります。ここでは、最近の技術を用いて車輪の再発明をしてみました。すなわち、<a href="https://github.com/electric-sql/pglite">PGlite</a>というPostgreSQLをWebAssembly化したものを使って、ブラウザ上で動く全文検索機能を実装しました。</p>
<p>PGliteのWasmバイナリが2.8MB、記事データが5.8MBほどあるようです。初回のページロード時にデータベースの初期化が走るのですが、いまどきならそんなに問題になるほどでもないかもしれません（検索しようとしたときだけにするような工夫はしたいところです）。</p>
<h2>コンテンツ更新をトリガに自動デプロイする</h2>
<p><strong>やったこと：</strong></p>
<ul>
<li>コンテンツとコードを別々のGitHubリポジトリで管理</li>
<li>コンテンツのリポジトリの更新をトリガーに、ホームページリポジトリのビルドを実行</li>
</ul>
<p>コンテンツとウェブサイトのコードは、別々のGitHubリポジトリで管理しています。そして、コンテンツを更新したら、自動的にウェブサイトが作り直されて公開されるように、GitHub Actionsを設定しました。どちらも単一のリポジトリで管理することも可能なのですが、Obsidianアプリを開いたときにコードが含まれるのはコンテンツ管理上煩雑なので、分けることにしました。</p>
<p>ホームページのリポジトリは更新があったらGitHub Actionsで自動デプロイするようにしています。さらには、Obsidianで管理しているコンテンツのリポジトリに変更をプッシュすると、GitHub Actionsでホームページのリポジトリのワークフローをトリガするようにしました。そのことで、コンテンツ更新時にホームページのリポジトリ側でもGitHub Actionsが動いて、ビルドとコンテンツ更新ができるようにしました。</p>
<p>コンテンツのリポジトリのワークフローを参考に掲載しておきます（といっても、公開用ディレクトリで更新があったらホームページのワークフローをトリガしてるだけですが）。</p>
<pre><code class="language-yaml">name: Trigger Main Repo Workflow

on:
  push:
    branches: [ main ]
    paths:
      - 'public/**'
  workflow_dispatch:

jobs:
  trigger-main-workflow:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Main Repository Workflow
        run: |
          curl -X POST \
            -H "Accept: application/vnd.github+json" \
            -H "Authorization: Bearer ${{ secrets.HOMEPAGE_REPO_PAT }}" \
            https://api.github.com/repos/kentaro/kentaro.github.io/actions/workflows/deploy.yml/dispatches \
            -d '{"ref":"main"}'
</code></pre>
<h2>いろんな場所のアウトプットをまとめて表示</h2>
<p><strong>やったこと：</strong></p>
<ul>
<li>複数のプラットフォーム（note、YouTube、zennなど）のRSSフィードを取得</li>
<li>ビルド時にフィードを解析し、データを統合</li>
<li>統合したデータを時系列順に並べた静的ページを生成</li>
</ul>
<p>僕はnoteやYouTube、zennなど、いろんな場所でコンテンツを出しています。以前のホームページでもやっていたのですが、これらを一箇所にまとめて見られるように作ったのが<a href="https://kentarokuribayashi.com/works">アウトプットページ</a>です。自分の活動をふりかえるのに便利です。</p>
<p>やってること自体に特筆すべきことはありません。各サービスのRSSフィードを取得して、時系列順に並べて表示しています。これも、ホームページをビルドするときに自動でデータを取得して、静的なページとして生成しています。</p>
<h2>「n年日記」機能で過去のふりかえり</h2>
<p><strong>やったこと：</strong></p>
<ul>
<li>日記コンテンツを日付でインデックス化</li>
<li>同じ日付の過去の日記を並べて表示する「n年日記」ビューを実装</li>
</ul>
<p>日記を続けていると、「去年の今日は何してたっけ？」と振り返りたくなること、ありますよね。そこで、普通の日記表示に加えて、いわゆる「n年日記」という機能を実装しました。ある日付の日記を年をまたいで見られる機能です。hnsやtDiaryのような、Web日記の創世記からあるCMSが実現していた面白い機能です（<a href="https://tdiary.org/20021201.html">「長年日記」をmain trunkにマージ - tDiary.org</a>）。</p>
<p>「あー、去年も同じことで悩んでたな」とか「この頃から考え方が変わってきたんだな」とか、自分の変化を客観的に見ることができて面白いです。Scrapboxで日記を書いていたときは日付のタグを付与することで実現していたのですが、このシステムでは自動的にできるようになりました。</p>
<h2>おわりに: 知的生産のベースとしてのホームページへ</h2>
<p>このホームページは、Webサイトとしては特にたいしたことをやっているわけではないのですが、AIエージェントの力を借りることによって短期間でこれまで紹介してきたことを実現できました。</p>
<p>そもそもAI前提だとローカルにファイルがある方が取り回しがいいよねということで始めたわけですが、そのあたりはまだまだ全然着手できていません。また、Obsidianでのメモ書きもあまりできていないので、そもそも機能をあまり使えていません。キーワードリンク的な機能なども使っていくと、その辺を記事としてどう扱うかとか、ナレッジベース自体も公開対象にするとか、そういうこともやりたくなりそうです。</p>
<p>Obsidian自体をもっと使いこなせるようになったら、自分の知的生産のベースにしていけるはずなので、今度はそのあたりに取り組んで行きたいですね。</p>


2025年、AI前提のホームページ作り直し―ObsidianをヘッドレスCMSとした静的サイト（全文検索つき）