第 07 章「Webを作る ── HTML+CSS+JavaScriptという原点回帰」の主張を裏付ける。
章のどの主張に対応するか
React + Next.js + TypeScript + Tailwind で業務 Web 構築: 開発 3 ヶ月、依存 約 1,200 個、
node_modules500 MB。 同じ機能を HTML+CSS+FastAPI+Markdown で構築: 開発 2 週間、依存 4 個、合計 10 MB。
(章本文「実例: 数字で見る」より)
やること
ある農園が「自分の Web サイトが欲しい」── これを最小スタックで作る。
- 入力:
src/index.mdsrc/news.mdsrc/shipping.md(計 3 枚) - ビルド:
python3 build.py── 100 行の Python - 出力:
out/*.html(3 ページ)+ Mermaid 図 2 つを CDN で描画 - デプロイ:
out/を Cloudflare Pages や GitHub Pages に置くだけ
ビルド時間 約 3 ms、HTML 合計 約 7 KB、依存パッケージ 1 個。
構成
example-1/
├── README.md
├── build.py ── Markdown → HTML(100 行、依存は markdown-it-py のみ)
├── Makefile
├── results.md
├── src/ ── ソース(全部 Markdown)
│ ├── index.md ── トップページ + Mermaid 配送フロー
│ ├── news.md ── お知らせ
│ └── shipping.md ── 配送解説 + Mermaid 図
└── out/ ── ビルド結果(これが Web サイト)
├── index.html
├── news.html
└── shipping.html
実行
pip install markdown-it-py
make clean && make all
# ローカルで確認
make serve # → http://localhost:8765
なぜこれが「実例」になるのか
業務用の小さな Web サイトを作るのに React も Next.js も Tailwind も node_modules も要らない。
- Markdown で書く(章 01 と同じ)
- Mermaid で図を入れる(章 03 と同じ)
- Python が HTML に焼く(章 04 と同じ)
- HTML/CSS/CDN で表示する(古典的な Web)
これだけで、
- ページの追加 =
src/foo.mdを 1 枚足してmake - 内容の変更 = Markdown を直して
make - デザイン変更 =
build.pyの CSS を直してmake - バージョン管理 = Git で diff が出る
- AI が編集に並走できる(全部テキストだから)
- 10 年後も読める(HTML は 30 年動いている)
業務系の Web に必要なものは、ほとんどここにある。フォーム送信や認証が 必要なら、第 7 章で言う「FastAPI を最小限」で足す。
このサイト(aiseed.dev)も同じ考え方で、150 ページ以上を Markdown + Python ビルドで作っている。React・Next.js・TypeScript はゼロ。
計測結果 — 第 07 章 example-1
実行環境: Linux 6.18 / markdown-it-py / Python 3.x
ビルド規模
| 項目 | 数値 |
|---|---|
| Markdown ソース | 71 行 / 約 1.8 KB(3 ファイル) |
build.py(ビルドスクリプト全部) |
109 行 / 約 4 KB |
| pip 依存パッケージ | 1 個(markdown-it-py) |
node_modules/ |
0 KB(無し) |
| ビルド時間 | 2.6 ms |
| 出力 HTML 合計 | 7,103 B (6.9 KB) ── 3 ページ |
| ランタイム JS | CDN の Mermaid 1 個だけ |
比較(章本文の数字)
| 項目 | React + Next.js | このスタック |
|---|---|---|
| 開発期間 | 3 ヶ月 | この規模なら 数時間 |
| 依存パッケージ | 約 1,200 | 1 |
node_modules |
約 500 MB | 0 MB |
| ビルド時間 | 約 3 分 | 2.6 ms(70,000 倍速い) |
| 配信ファイル合計 | 数 MB | 6.9 KB |
| ホスティング月額 | Vercel Pro $20+ | Cloudflare Pages $0 |
出力(out/index.html 抜粋)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>山田農園 — 山田農園</title>
<style>:root { --ink: #1a1a1a; --paper: #f4f1ea; ... }</style>
</head>
<body>
<h1>山田農園</h1>
<p>徳島市で 3 代続く小さな農園です。...</p>
<table>...商品テーブル...</table>
<div class="mermaid">flowchart LR ...</div>
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/...";
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
完全に静的。CDN の Mermaid を 1 行 import するだけで図がレンダリングされる。 JavaScript フレームワークは無い。バンドラも無い。
デプロイ(参考)
# Cloudflare Pages
wrangler pages deploy out/
# GitHub Pages
cp -r out/* ~/your-repo/docs/ && git push
# 自前サーバ
rsync -av out/ user@host:/var/www/
CDN の月額: Cloudflare Pages 無料枠で十分(月 100,000 リクエストまで)。 WordPress マネージドホスティング(月 5,000〜30,000 円)と比較して 年 6〜36 万円の節約。
ページの追加
$EDITOR src/contact.md # 新しいページを書く
make # 2.6 ms で再ビルド
WordPress なら管理画面に入って投稿フォームに貼り付け、メディアをアップロード、 プラグイン設定を確認 ── そして 6 ヶ月後にプラグインを更新しないと 脆弱性で侵入される。保守ゼロとの差はそこ。
再現手順
pip install markdown-it-py
make clean && make all