oto-nari.com を立ち上げました

Kojiro Tanaka 2026年6月14日

新しいドメイン oto-nari.com でサイトを立ち上げました。ブログ記事と趣味で作ったミニアプリを並置して運用します。元々 WordPress で書いていた記事（192件）もすべて移行しました。

技術スタック

レイヤ	技術
フレームワーク	Astro 6 (SSG)
スタイル	Tailwind CSS v4 + Liquid Glass
記事	MDX (Git 内管理、Keystatic エディタ)
検索	Pagefind (ビルド時にインデックス生成)
ホスティング	Cloudflare Workers with Static Assets
ミニアプリ	Vite + React (pnpm workspaces)

WordPress からの移行

REST API 経由で投稿・固定ページ・画像を一括インポート。Gutenberg ブロックを Markdown に変換し、permalink 構造（/%year%/%monthnum%/%postname%/）を維持したまま移行しました。

投稿 192件（公開 148 + 下書き 44）
固定ページ 4件
画像 503枚（138MB）

ミニアプリ置き場

apps/ 配下に独立した pnpm パッケージとしてミニアプリを配置。ビルド時に自動的に dist/apps/{slug}/ へ統合され、SEO メタも注入されます。

oto-nari.com/
├─ apps/                    # ミニアプリ（独立パッケージ）
│   └─ sample-app/          # Vite + React
├─ src/
│   ├─ content/blog/        # 記事 (.mdx)
│   └─ content/pages/       # 固定ページ (.mdx)
├─ scripts/
│   ├─ build-apps.ts        # アプリ統合
│   └─ import-wordpress.ts  # WP移行スクリプト
└─ keystatic.config.ts      # ローカルエディタ設定

執筆ワークフロー

Keystatic のローカルエディタでリッチ編集し、AI エージェントにレビューさせてから git push。Workers Builds が自動デプロイします。

デザイン

Apple の Liquid Glass を参考に、ナビゲーション層（ヘッダー、フローティングボタン）に backdrop-filter と inset ハイライトを適用。コンテンツ層は可読性を優先してFlatに保っています。

ゆっくり更新していきます。