stackbystep

Claude Code と一緒にブログを自作した 1 週間の記録 ― 初めての Next.js / Django / VPS

2026.04.26テクノロジー#AI#Claude Code#django#nextjs#VPS#テック

はじめに

こんにちは。 この記事を読みに来てくださってありがとうございます。

このブログ「stackbystep」では、読書・テック・金融・習慣などについてゆるく書いています。 今回は、このブログ自体を自作した 1 週間の記録 をまとめてみました。

先に正直なことを書いておきます。 実装の大半は Claude Code に手伝ってもらいました。

Claude Code を知らない方もいるかもしれないので軽く補足すると、Anthropic 社が提供している AI コーディングアシスタントです。 ターミナル上で対話しながら、コードを書いたり、コマンドを実行したり、ファイルを読み書きしたりしてくれます。

自作ブログは知らない技術のキャッチアップから、設定ファイルの生成、エラー解析、手順書化まで、AI にかなり寄りかかった 1 週間でした。

ただ、丸投げで動いたわけではありません。 エンジニアとして 5 年間でやってきたことが、ここで効いた実感もあります。

出てきたコードや設定の 8 割くらいは「なぜこう書かれているのか」を理解しながら進められましたし、AI への指示出しや、出てきたものを採用するかどうかの判断も、これまでの経験がベースにあってこそでした。

それでも「AI に頼っただけで記事にしていいのか」というためらいは最後まで残ったのですが、逆に 今この立場から書くほうが誰かの役に立つ気がしたので、書くことにしました。

同じように「自分のブログを作ってみたいけど、ゼロから書き切れるほどの自信はない」という人がこの記事を読んで、「自分もやってみようかな」と思ってもらえたら嬉しいです。

作ったもの: stackbystep

技術構成は以下の通りです。

レイヤ使っているもの
フロントNext.js 15 (App Router, TypeScript), Tailwind CSS 4
バックエンドDjango 5.1 + Django REST Framework
DBMySQL 8.4
実行環境Docker Compose
インフラConoHa VPS (Ubuntu 24.04), Nginx, Let's Encrypt
プロビジョニングAnsible
CI/CDGitHub Actions
CDN / DNSCloudflare
計測GA4, Search Console

なぜ自作したのか

動機は 3 つありました。

  1. アウトプットの場が欲しかった ― これが一番強い動機です
  2. 新しい技術を試したかった ― 普段は PHP / Laravel / WordPress 中心なので
  3. ポートフォリオ作品が欲しかった ― フリーランスとして

WordPress も当然選択肢に入れましたが、「普段やっていることと同じだと面白くない」という気持ちが勝ちました。

技術スタックを選んだ理由

フロントに Next.js

React は業務で触っていたので、その延長で入れました。 App Router を正面から触ってみたかったのも動機のひとつです。

バックエンドに Django

学習目的としてちょうどよかったのと、Admin が最初から付いてくるので 執筆 UI に追加実装がいらない のも大きかったです。

インフラに ConoHa VPS

Vercel や Render のような PaaS も検討しましたが、インフラを含めた運用経験 のほうが自分には価値が高いと判断しました。

初体験の技術のなかで一番新鮮だったのは Ansible でした。 サーバー構築を playbook で自動化する体験は、昔 VPS を手動でぽちぽちやっていた頃を思うと、だいぶ楽な時代になったなと感じました。

1 週間でやったこと

4/18 に着手 → 4/20 に本番公開 → 4/23 に SEO 土台まで、という流れでした。

フェーズ分けは以下の 5 つです。

フェーズ 1: ローカル環境構築

Docker Compose で MySQL + Django + Next.js の 3 コンテナを立ち上げ、localhost:3000 と localhost:8000/admin で両方が動く状態にしました。

数時間で開発環境が組み上がる のが、この時代の Docker と AI の両方を使えることの恩恵を一番強く感じた瞬間でした。

フェーズ 2: Django で記事が書ける状態に

Category / Tag / Post の 3 モデルを定義し、django-markdownx で Markdown エディタ + リアルタイムプレビューを入れました。

Django Admin はモデルを書いただけで CRUD 画面・検索・フィルタ・並び替えが揃うので、「執筆環境を自作する」という工程がほぼ消える のは体験として強いです。

カテゴリ（ForeignKey）とタグ（ManyToManyField）の使い分けを、「カテゴリ = 本棚／タグ = 付箋」のイメージで整理できたのは、このフェーズの収穫でした。

フェーズ 3: DRF で API 化 + Next.js で表示

読み取り専用の REST API を 3 本（一覧 / 詳細 / カテゴリ）用意し、Next.js App Router から SSR/ISR で表示するようにしました。

revalidate = 600 をページに書いておくだけで、10 分ごとに裏で再生成されて読者には常にキャッシュが返る、という ISR の運用シンプルさは、個人ブログと相性が抜群です。

Tailwind CSS 4 の @theme 構文でデザイントークン（色・ブレイクポイント）をそのまま CSS 変数として移植できて、モックの色味を設定ファイルにコピペするだけで済んだのも気持ちよかったポイントです。

フェーズ 4: 本番公開

ここが一番時間を食いました。

  • ConoHa VPS で Ubuntu 24.04 を契約、SSH 鍵認証オンリー化・root ログイン無効化
  • Ansible playbook で base / ufw / docker / deploy_user / nginx / web_sites / certbot の 7 ロールをプロビジョニング
  • Cloudflare で DNS、certbot --webroot で Let's Encrypt 証明書発行
  • GitHub Actions で main push → VPS 自動デプロイ

手でちまちまやっていた頃と比べると、再構築可能な状態が playbook + compose でコード化されている 安心感は別格でした。

公開後編: SEO と計測の土台

  • app/sitemap.ts / app/robots.ts でサイトマップを動的生成
  • GA4 と Search Console に登録、サイトマップ送信
  • JSON-LD（WebSite / BlogPosting / BreadcrumbList）を SSR で出力
  • Google リッチリザルトテストでエラーなく検出されることを確認

Claude Code とどう分担したか

Claude に任せた作業

一番助かったのはサーバー構築 でした。 Ansible のロール分割も、Nginx の HTTPS 設定も、自分でゼロから全部は書けなかった領域です。

これを 1 週間で触れて動く状態まで持っていけたのは、完全に AI のおかげです。

他に任せたものは以下です。

  • Docker Compose / Dockerfile の初版生成
  • 環境変数まわりの整理
  • エラーログから原因の当たりを付ける
  • 作業の手順書化・引き継ぎ資料化

自分がやった作業

  • 作るものの意思決定（何を・なぜ・どう見せるか）
  • 設計とデザインの最終判断
  • 動作確認と受け入れ
  • 文章

設計とデザインの方向性だけは、人任せにすると「ブログが自分のものではなくなる」感覚があったので、最終的な判断は自分でやる、というラインを引きました。

この 1 週間で身についた "頼み方のコツ"

一番効いたのは 引き継ぎ資料を作ること でした。

「次のフェーズで何をやるか・どこまでやったか」をセッションごとに書き残しておくと、新しい会話にも即座に文脈を渡せて、指示の質が劇的に上がりました。

正直な気持ち

AI と作業をしてみて強く感じたのは、エンジニアとして「コードを書く」ことだけで勝負する時代はもう長くないかもしれない、ということでした。「AI に仕事を奪われる」というより、「AI でどんな仕事をしようか」 を考えるようになりました。

アウトプットの方向付けと意思決定ができる人が強いフェーズに入った気がしていて、このブログ自体もその練習を兼ねています。

詰まったところ・学んだこと

この 1 週間でハマったことが 3つあります。

1. MySQL 8.4 で default-authentication-plugin が削除されていた

古い記事をなぞって my.cnf に書いた 1 行で、MySQL が起動直後に Aborting しました。

MySQL 8.0 時代の変数が 8.4 では削除されていて、caching_sha2_password は 8.0+ でデフォルトなのでそもそも書く必要がない、というオチでした。

メジャーバージョンだけでなくマイナーバージョンまでドキュメントを合わせに行く、を習慣にしたい失敗です。

2. GitHub Actions の ssh デプロイで stdin が "食われる"

ssh ... bash -se <<HEREDOC 形式で deploy スクリプトを流していたら、スクリプト内の docker compose exec -T が stdin の残りを食ってしまい、以降の行がサイレントにスキップされる 事故に遭いました。

成功扱いなのにデプロイが途中で止まっている、という一番タチが悪いパターンです。

全外部コマンドに </dev/null を付けて解決しました。

3. Docker layer cache で記事更新が本番に反映されない

Next.js の build 時に API を fetch して静的化する設計にしていたため、ソース未変更だと COPY . . + RUN npm run build が cache hit してしまい、記事 DB を更新しても HTML に反映されない という罠にハマりました。

ARG CACHE_BUST を builder stage に差し込んで、GHA 側から ${{ github.run_id }} を渡すことで毎回 invalidate するようにしました。

ビルド時間は 23 秒 → 1 分 1 秒になりましたが、許容範囲です。

かかった時間とお金

  • 作業日数: 4/18 〜 4/23 の 6 日間（平日夜 20〜22 時 + 週末 6 時間程度）
  • 月額: ConoHa VPS 約 890 円 + ドメイン代（Cloudflare は無料枠）
  • ランニングコストは月 1,000 円前後

フェーズ 1〜3 は想像より早く終わりました。 Docker と Next.js / Django の組み合わせが思ったよりスムーズだったのと、AI の補助が一番効きやすい領域だった気がします。

フェーズ 4 の VPS 構築と本番化は想定より時間がかかり、ここが体感で一番タフな工程でした。

最小構成（バックエンドを置かない静的 + PaaS）なら月額 0 円ルートもありましたが、インフラを含めた運用経験が欲しかった ので VPS を選びました。 note pro や Vercel Pro と比べても、コストは安い部類です。

おわりに

自作してみて一番変わったのは、「意外と早くできてしまう」という実感 でした。

もともと 6 週間くらいかけるつもりで始めたプロジェクトでした。 それが、フタを開けてみたら 平日夜 20〜22 時 + 週末数時間、正味 6 日間で本番公開までたどり着いていました。

数年前なら、同じものを一人で作るのに週や月の単位で時間がかかっていたはずです。 AI と一緒に作業できる今だからこそ出せる速度 だと、素直に思います。 実際うまく使えばもっと早く構築できるかもしれません。

もし「ブログを作ってみたいけど、自分には難しそう」「まとまった時間が取れない」と感じている方がいたら、一度手を動かしてみてほしいです。 フルタイムで取り組まなくても、平日夜と週末だけで、自分の城を持つところまでいけます。

今なら AI もあります。昔よりずっとハードルは下がっていますし、「ゼロから全部書けなくても出せる」はむしろ今の時代の強み です。

まずは、ターミナルで 1 コマンド叩くところから、でいいと思います。 気づいたら、この記事と同じように、自分のサイトが世界に公開できているかもしれません。

最後までお読みいただき、ありがとうございました。 また次の記事でお会いできたら嬉しいです。