okikusan-public / articles / Obsidian → LLM Wiki → HTML → AI Deploy
JA EN
← index
SECOND BRAIN PIPELINE / 2026

Obsidian LLM Wiki HTML AI Deploy

Obsidian のメモが、勝手に記事になる

毎日 daily/ にラフを投げ続けるだけで、AI が裏で wiki を育て、HTML Artifact を ja / en で書き、Web に公開してくれる。書く労力は最小、出てくるものは最大。第二の脳の発信パイプラインを AI で爆速化するメモ。

Obsidian Claude Code Karpathy LLM Wiki Multi-language Static Hosting 2026.05.16 · 8 min read
FIG.0 — PIPELINE OVERVIEW
🌱 DAILY obsidian/ 1. Obsidian 人間が雑多投入 INDEX 2. LLM Wiki AI が育てる JA EN 3. HTML × ja/en AI が書く CDN 4. Deploy AI が配る 人間 見る・触る // SECOND BRAIN PIPELINE
人間がラフに投げ、AI が育て・書き・配り、人間が読む。人間の手数は最初と最後の 2 点だけ。
CONTENTS10 sections
  1. 01Context
  2. 02Principle
  3. 03Overview
  4. 04Phase 1 / Obsidian
  5. 05Phase 2 / LLM Wiki
  6. 06Phase 3 / HTML × Lang
  7. 07Phase 4 / Deploy
  8. Worldview
  9. 08Positioning
  10. 09Summary
▍ THE PROMISE

Obsidian のメモを毎日投げ続けるだけで、勝手に記事になって外に出ている。AI が裏で wiki を育て、HTML を ja / en で書き、公開先まで運んでくれる。

▍ TL;DR
§ 01 CONTEXT

なぜ Zenn / Qiita を「最終出力」にしないのか

Zenn / Qiita は強い。SEO もあるし、技術コミュニティの導線にもなる。ただし「最終的に読まれる Artifact」としては、いくつかの限界がある。

Markdown 記事(Zenn/Qiita)HTML Artifact(自前)
図の自由度低い(画像差し込み)SVG / アニメ / インタラクティブ
構造の見せ方線形(上から下)グラフ / hover / zoom / 段階表示
デザイン制テーマ固定完全自由
AI 生成テキスト中心Artifact 丸ごと生成可能
多言語化記事を別途書き直しワンソースから ja / en 同時生成
更新コスト手で書くLLM Wiki から再生成

ポイントは「AI 時代の強い表現は HTML / SVG / Interactive UI であり、Markdown はその入力に位置を下げた」こと。Zenn / Qiita は廃止しない。問題提起・1 枚図・軽い導入を置き、本体は自前 HTML へ誘導する役割分担にする。

§ 02 PRINCIPLE

AI が読む形式 / 人間が読む形式

これは Anthropic Claude Code チーム(Thariq 氏ら)も発信している論点で、ざっくりこう整理されている:

AI エージェントの出力が大規模化(1000 行超)するにつれ、Markdown の「長文壁」が深刻化した。100 行を超えるとほぼ読まれない。
Markdown は AI が読む資料、HTML は人間が読む資料、という棲み分けが進んでいる。

これを少し抽象化すると、こういう二分法になる。

FIG.1 — AI FORM vs HUMAN FORM
▸ second-brain.md 01 02 03 04 05 06 07 08 # Second Brain - [[daily/...]] - [[knowledge/...]] tags: [llm, wiki] type: moc links: 8 --- graph: ▸ FOR AI // 構造解析◎ / 差分管理◎ / トークン効率◎ AI RENDER second-brain.html ▸ FOR HUMANS ▸ SVG ▸ INTERACTIVE TAP // 視覚密度◎ / 即時理解◎ / 触れる◎
同じ情報を 両方で保持する のではなく、変換可能な単一ソース から都度生成する。
AI が読む形式人間が読む形式
代表例Markdown / YAML / JSON / グラフHTML / SVG / React / UI
強みトークン効率、構造解析、差分管理視覚密度、レイアウト、即時理解
弱みスクロール量、図の弱さ、読む努力トークン重い、git 差分しづらい
役割AI への入力 / AI 間の中間表現人間への最終 Artifact
▍ DESIGN PRINCIPLE

AI が育てる層は Markdown / YAML / グラフで保ち、人間が読む層だけ HTML / SVG に変換する。 同じ情報を両方で持たず、変換可能な単一ソースから都度生成する。

§ 03 OVERVIEW

全体像:4 フェーズのパイプライン

ここからは、Obsidian の雑多な入力が Web 上の HTML Artifact になるまでを、4 つのフェーズに分けて見ていく。

FIG.0.5 — 4-PHASE BREAKDOWN
HUMAN AI scribble read PHASE 1 Obsidian daily/ PHASE 2 LLM Wiki knowledge/ PHASE 3 HTML × Lang ja.html + en.html PHASE 4 Deploy CLI / MCP curate write ship
人間が触るのは Phase 1(入力)最終的に読む の 2 点。中間 3 工程は AI が回す。
§ 04 PHASE 1 / OBSIDIAN

Phase 1 ── Obsidian で雑多に集める

>1-1グラフを「未来の設計図」として使う

Obsidian の Graph View は、書いたノートの関係を表示するためのものとして扱われがちだが、もっと面白い使い方がある。

書いた瞬間に [[未作成のリンク]] を貼っておくと、Graph に "🌱 まだ存在しないノード" が芽吹く。
後から芽の濃いものだけを実体ノートに育てればいい。

これは Karpathy が示唆した「LLM Wiki は dangling link を起点に育てる」運用と整合する。グラフは過去の蓄積を眺める道具ではなく、未来のノードを設計する道具になる。

FIG.2 — GRAPH AS FUTURE-DESIGN TOOL
第二の脳 Karpathy LLM Wiki Obsidian Claude CLAUDE .md Wiki 🌱 🌱 🌱 🌱 実在ノート 🌱 未作成(育てたい)
実在ノート(紫)と未作成 🌱(緑・破線)を同じグラフに置く。グラフは過去の鏡ではなく、未来の設計図。

>1-2daily/ に殴り書く

FIG.2.5 — RAW INPUT: SHALLOW FOLDER + UNGROOMED .md
▸ FILE TREE 📂 daily/ └─ 📂 2026/ └─ 📂 20260516/ ├─ 📝 思いつき.md ├─ 📝 abc-test.md ├─ 📝 雑感.md └─ 📝 rough-note.md // 3 階層しか掘らない。タグも索引も無し。 ▸ rough-note.md # ふと思ったこと AB を試したい - foo(前回の続き) - bar??? たぶん違う 明日もう一回考える no tags no links no frontmatter
ファイル構造は浅く、ノートの中身は整えない・タグつけない・リンク張らない。「入力の摩擦をゼロに保つ」が原則。
汚いラフな方が入力の意欲はわく」というのが現場の真実で、ここを AI に整理させた瞬間、入力意欲が死ぬ。

>1-3AI には「サジェストのみ」させる

整理・タグ付け・リンク張りは AI が提案、人間が採用 という構造にする。これにより daily/ は常に「自分の脳の一次出力」のまま残り、LLM Wiki 側が二次的に育つ。

§ 05 PHASE 2 / LLM WIKI

Phase 2 ── LLM Wiki 化(Karpathy 式 第二の脳)

ここから AI が能動的に動く。Andrej Karpathy が提唱した LLM Wiki の構成をそのまま採用する。

>2-13 層アーキテクチャ

FIG.3 — 3-LAYER ARCHITECTURE
▸ SCHEMA CLAUDE.md / AGENTS.md AI の行動規範 ルールブック ▸ WIKI knowledge/*.md AI が育てる INDEX + MOC ▸ RAW daily/<YYYY>/<YYYYMMDD>/*.md 人間が殴り書く AI は触らない ABSTRACT CONCRETE
下から上へ「具体 → 抽象」。Raw が一次情報、Wiki が二次整理、Schema が AI の振る舞いを縛る

役割分担:人間はキュレーション・分析・良い問いを立てる、LLM は要約・リンク・整合性維持・矛盾記録。

>2-23 つのコア操作

FIG.4 — INGEST / QUERY / LINT
on add on ask LLM WIKI daily → → answer audit 01 Ingest 新ノードを読んで MOC に追記 02 Query INDEX → MOC → 実体 を引用つきで返す 03 Lint 矛盾・孤立・欠落リンクを検出 scheduled
Ingest =取り込み、Query =検索・回答、Lint =整合性維持。CLAUDE.md にこの 3 操作を書き下ろし Claude Code に常時参照させる。

>2-3矛盾は「消さずに並列保持」する

同じテーマで違う日付の違うノートが出てきても、統合・削除しない。知識の変化として両方残し、各 MOC の「日付別ノード」に追記する。どちらが「正」かはユーザーが決める。

▍ なぜ並列保持か

AI に整理を任せると、便利な一方で「自分の思考の履歴」が消える。Karpathy 式は 複利的に蓄積する ことを最重要視する。矛盾そのものが思考の足跡になる。

§ 06 PHASE 3 / HTML × MULTI-LANG

Phase 3 ── HTML 化 + 多言語化

>3-1なぜ HTML か

「読む努力」を要求するコンテンツは AI 時代に弱い。読む → 理解するから 見る → 触る → 必要箇所だけ深掘る へとシフトしている。HTML は以下を 1 枚に同居できる:

>3-2AI に丸ごと書かせる

Claude Code に LLM Wiki と一緒に「この MOC を HTML 1 枚に変換して」と指示すると、構造化済み Markdown を読み、図示できる箇所を SVG で起こし、ナビゲーション付きの 1 枚 HTML を吐く、ところまで一気に行ける。人間は構造設計と最終チェックだけ

Claude Code Fancy HTML Hook のような PostToolUse hook で md → HTML を自動生成する仕組みまで足せば、md を保存した瞬間にビジュアル化された HTML が並走する。

>3-3多言語化は「おまけ」でついてくる

もともと「個人の発信を海外にも届けたい」という動機があったが、AI に HTML を書かせる仕組みを組んだ瞬間、多言語化は無料の副産物になった。
同じ MD ソースから AI が HTML を生成するなら、その途中で言語切替も同時にやれる。

FIG.5 — ONE SOURCE → JA + EN
.md ワンソース knowledge/*.md AI 同時翻訳生成 prompt × 2 langs ja.html 日本語 en.html ENGLISH // 2 langs from 1 source
同じ MD ソースから AI が ja.html / en.html を並列生成。翻訳ではなく、各言語向けに自然な記事として再構成される。
▍ なぜ「翻訳」ではなく「並列生成」か

機械翻訳は文構造を引きずるので、英語として自然な記事にならない。LLM Wiki に蓄えた構造化された一次情報を渡し、「英語圏読者向けに en.html を書け」と命じると、AI は言語ごとに記事を再構成する。トピック順、例示、たとえ話まで言語文化に合わせて差し替わる。

>3-4配置ルール

vault 内に専用フォルダ(例:external-cloudflare/)を切り、公開していい HTML だけをここに入れる。knowledge/daily/ は機密性が高いので、絶対にここへコピーしない。

§ 07 PHASE 4 / DEPLOY

Phase 4 ── AI でデプロイする

生成された HTML は、最終的に AI から CLI または MCP を叩いてホスティングに上げるだけで公開できる。Netlify / GitHub Pages / Vercel / Cloudflare Pages / S3 + CloudFront など、静的サイトを CLI または MCP で扱えるホストならどれでもいい。自分の手に馴染んでいるサービスを選べばいい。

ここで重要なのは「手順」より「人間がダッシュボードを開かない」という体験のほうで、書き手から見た流れはこうなる:

▍ HUMAN INTERACTION SURFACE

人間 → daily/ にラフ投入
    ↓
Claude → knowledge/ を更新
    ↓
人間「これ HTML にして公開して」
    ↓
Claude → ja.html + en.html を生成 → 任意のホストに CLI/MCP でデプロイ → 公開 URL を返す

人間が触るのは「自然言語の指示」と「ラフな daily 入力」だけ。デプロイの具体的な設定手順は別記事に分離する。

▍ THE WORLDVIEW — 「Obsidian のメモが、勝手に記事になる」

雑多を貯め続けるだけで、勝手に記事が降りてくる

このパイプラインが本当に強いのは、「記事を書く」という意識をしなくていいところにある。

毎日 daily/ に思いついたことを殴り書く。それだけ。文章として整っている必要も、リンクが張られている必要もない。続けていくと、Claude が裏で勝手にテーマを束ねて MOC を作り、矛盾を並列保持し、グラフを育てる

ある日「最近この話どうなった?」と尋ねると、AI が wiki から抽出して清書済みの HTML 記事を ja / en で返してくる。気づくと、自分の脳の一部が静かに Web 上の Artifact として常時公開されている。

これは「ブログを書く」というワークフローではなく、自分の思考そのものを、AI が日々清書し続けてくれる状態。書く側の認知負荷はほぼゼロ、出てくる成果物は HTML / 多言語 / インタラクティブ。
ノートを書くこと=発信になる。

§ 08 POSITIONING

Zenn / Qiita との使い分け

旧来の「Zenn / Qiita に長文を書く」は捨てない。役割を変える。

Zenn や Qiita を 最終出力 にするのは前述のとおり弱いが、入口としては今でも強い。検索や技術コミュニティ経由で初めて読み手に届くのは、自前ホストの URL より圧倒的にこれらのプラットフォームのほう。SEO もコミュニティ濃度もこちらに優位がある。

なので運用としては、Zenn / Qiita には「要点だけ短く・1 枚図入り・問題提起寄り」の導入記事を置き、本体の HTML Artifact へ誘導する形にする。Zenn / Qiita 側で 到達を稼ぎ、自前 HTML 側で 深い体験を出す、という二段構え。

「同じ記事を 2 か所に書くのは無駄では?」と思うかもしれないが、入口と本体は表現の粒度が違うので二重投稿にはならない。入口は 「読まれるための圧縮版」、本体は 「触られる完全版」。役割を分けるとそれぞれ無理なく書ける。

FIG.6 — ZENN/QIITA → SELF-HOSTED HTML
▸ ENTRANCE Zenn / Qiita(導線) 問題提起・1 枚図・軽い導入・SEO・コミュニティ REDIRECT ▸ MAIN ARTIFACT 自前ホスト HTML(本体) Interactive HTML / SVG / Graph / 多言語版 / AI Playground
Zenn / Qiita は入口、自前 HTML は本体。役割分担で両者の強みが活きる。
▍ 運用パターン

Zenn / Qiita に置く 導入記事:問題提起 + 結論の 1 文 + 重要な 1 枚図 + 自前 HTML への CTA。500〜1000 字程度。
自前 HTML 側の 本体:図解・SVG・インタラクティブ要素・多言語版・コードサンプル込みのフルバージョン。LLM Wiki から AI が組み立てる。

§ 09 SUMMARY

まとめ:本質的に何が変わったか

書く人間が PowerPoint / HTML / 記事を作るAI が Artifact を生成する
集める整理しながら書く雑多に投入し、AI が整理する
出すMarkdown 記事を Zenn / Qiita に手で書くHTML を AI に書かせて CLI / MCP でデプロイ
翻訳記事ごとに別作業ワンソースから ja / en 並列生成
読む上から下に読む見る・触る・必要箇所だけ深掘る

第二の脳(Obsidian + LLM Wiki)から Web 上の HTML Artifact までを1 本のパイプラインとして組み上げると、

という三つが同時に手に入る。これは「ブログを書く」のではなく、自分の脳の一部を Web に常時投影するという新しい発信のあり方だと思っている。