ブログを作りたかったが、コードを書く気力はなかった

ブログを始めようと思ったとき、まずWordPressを考えた。でもサーバー代がかかるし、テーマ選びやプラグイン管理が面倒だ。noteやZennも考えたが、自分のドメインでやる意味がほしかった。

Next.jsで自作するのは決めた。でも全コードを自分で書く気力はなかった。そこでagentic codingでAIに任せてみることにした。結果、ドメイン代だけで動くブログができた。

ブログ構築手段の比較

WordPressnote/Zennagentic codingでNext.js
初期コスト月1,000円〜無料ドメイン代のみ
自由度高い低い完全自由
構築の手間中ゼロAIに任せれば中〜小
運用の手間中ゼロほぼゼロ
Vercelの無料枠で十分。独自ドメインは年間1,500円程度。記事はマークダウンファイルで管理し、GitHubにプッシュすれば自動デプロイ。サーバーもデータベースもいらない。

やったこと：手順ベースの完全公開

1. プロジェクトの土台を作る

まずAIにこう指示した。

「Next.js 16のApp Routerでブログを作って。TypeScript、Tailwind CSS v4。マークダウンファイルを読み込んで一覧表示と詳細表示ができる最小構成で。npmパッケージは `gray-matter` と `marked` を使う。Vercelにデプロイする前提で」

使ったライブラリはこれだけだ。

"dependencies": {
  "gray-matter": "^4.0.3",
  "marked": "^18.0.3",
  "next": "16.2.6",
  "react": "19.2.4",
  "react-dom": "19.2.4"
}
gray-matter はマークダウンのYAML frontmatterをパースする。marked はマークダウンをHTMLに変換する。この2つだけで、データベースなしのブログが成立する。

2. ディレクトリ構成をAIと詰める

App Routerのディレクトリ構成をAIに提案させて、自分の好みに調整した。

app/
├── _layout/          # ヘッダー、フッター、グローバルレイアウト
├── blog/
│   ├── _content/     # マークダウン記事ファイル（12〜16記事）
│   ├── _lib/         # 記事の読み込み・パース・関連記事ロジック
│   ├── _layout/      # ブログカード、目次、パンくず、著者ボックス等
│   └── [slug]/       # 動的ルーティング（各記事ページ）
├── about/            # Aboutページ
├── privacy/          # プライバシーポリシー
├── disclaimer/       # 免責事項
├── sitemap.ts        # サイトマップ自動生成
├── rss.xml/          # RSSフィード
├── robots.ts         # robots.txt
└── site.ts           # サイト名・著者情報の一元管理

3. 記事管理の仕組みを作る

AIに指示して `app/blog/_lib/posts.ts` を作成。ここにすべてのロジックを集約した。

  • getAllPosts() — _content/ 内の全 .md ファイルを読み込み、日付降順で返す
  • getPostBySlug(slug) — 指定スラッグの記事をパースしてHTML化
  • getAllSlugs() — generateStaticParams() 用に全スラッグを返す（SSG）
  • getAllCategories() / getAllTags() — カテゴリ・タグのフィルタリング用
  • getRelatedPosts(slug) — タグ一致度で関連記事をスコアリング

記事のfrontmatterはこう。

yaml
---
title: "記事タイトル"
description: "メタディスクリプション"
date: "2026-05-19"
category: "ウェルネス"
tags: ["最適化疲れ", "認知負荷", "AI疲れ"]
image: "/blog/slug/opengraph-image"
series: "optional-series-slug"
seriesOrder: 1
---

4. SEOとメタ情報を仕込む

AIに指示して以下の静的ファイルを生成。

  • app/sitemap.ts — 全記事＋固定ページのサイトマップXMLを自動生成
  • app/robots.ts — フルクロール許可＋sitemap参照
  • app/rss.xml/route.ts — RSS 2.0フィード
  • 各記事の generateMetadata() — title, description, OpenGraph, Twitterカード
  • app/blog/[slug]/opengraph-image.tsx — タイトル入りOGP画像を動的生成
  • JSON-LD: Organization, WebSite, BlogPosting, FAQ, Product/Review, BreadcrumbList

5. アフィリエイトリンクを自動処理する

`app/blog/_lib/affiliate-domains.ts` にアフィリエイト対象ドメインを登録しておくと、markedのカスタムレンダラーが自動で `target="_blank" rel="nofollow noopener noreferrer sponsored"` とPRバッジを付与する。

6. Vercelにデプロイして独自ドメインを設定

GitHubリポジトリを作り、Vercelにインポートした。デプロイ設定はデフォルトのまま。独自ドメインだけVercelの管理画面で追加して、DNSにCNAMEレコードを設定。これで `baboblog.com` が動き始めた。

GitHubにプッシュするだけでVercelが自動ビルド＆デプロイする。記事を書いたら git push するだけ。CI/CDの設定すら不要だった。

7. 日々の執筆と運用

記事はすべて自分で書いている。`app/blog/_content/{slug}.md` にマークダウンで保存して `git push` するだけ。Vercelが自動ビルド＆デプロイして数分で公開される。コードの基盤をAIに作らせたぶん、書くことに集中できるようになった。

かかったコスト

項目費用
ドメイン（baboblog.com）約1,500円/年
Vercel（Hobbyプラン）無料
GitHub無料
**合計****年1,500円**
ドメイン代だけで個人ブログを運営できている。広告を貼ればすぐに黒字化できる金額だ。

なぜこの方法を勧めるのか

WordPressでもnoteでもなく、自分でコードを管理する方法を選んだ理由は一つ。AIに書かせたコードをAIに修正させられるからだ。WordPressのPHPやnoteの制限の中で戦うより、Next.js + TypeScriptというAIが得意なスタックで全部を管理するほうが速かった。

AIにコードを任せる場合、型システムがあるTypeScriptは必須だと思った。JavaScriptだとエラーの原因特定に時間がかかる。TypeScript + ESLint でAIの出力を検証できる環境を先に整えておくこと。

ドメイン代だけで動くブログを、AIにコードを書かせて作る。この方法は十分に再現可能だ。マークダウンをGitHubにプッシュするだけで記事が公開される。サーバー管理もデータベースもない。残るのは「自分が何を書きたいか」だけだった。

自分でもブログを作りたくなったら、まずNext.jsプロジェクトを作って「マークダウンを読み込んで一覧表示するだけのブログ」とAIに指示してみてほしい。想像よりずっと速く動くものができる。