Claude CodeでZenn × GitHub連携を30分くらいで立てた話
はじめに
私はWeb制作フリーランス2年目で、フロントエンドエンジニアへの転向を目指して学習中です。学習ログを発信する場所として Zenn を選んだのですが、せっかくなのでセットアップ自体を Claude Code に伴走してもらいながらやってみました。
結果、アカウント作成から初回デプロイまで30分くらいで完了しました。手順自体は公式ドキュメント通りなのですが、AIに先回りで落とし穴を整理してもらえたので、ハマらず進めた感覚があります。同じことを始める人の参考になればと思って記録します。
やったこと（時系列）
1. Zenn アカウント作成
GitHubアカウントでログイン → ユーザー名を決める → 自己紹介を書く、で完了。
ユーザー名は後から変更できないので、Twitterと統一しました（発信導線が見つかりやすくなりそう、という観点で）。
2. Claude Code に計画立案を依頼
Plan Mode で「Zenn × GitHub 自動化の正しいやり方をリサーチしてから計画を立てて実行して」と頼みました。
すると、
- Zenn 公式ドキュメント
- 2025年運用ベストプラクティス記事
を WebFetch で並列取得して、手順 + 落とし穴 + 推奨ディレクトリ構造 を整理した実行計画を出してくれました。
「自分でやるなら、まず手を動かしてからハマって調べ直す」になりがちなのですが、先回りリサーチ → 計画 → 実行 の順番で進められたのが大きかったです。
3. リポジトリ作成 〜 Zenn CLI 初期化
gh コマンドでリポジトリを作って、zenn-cli を入れて初期化。
gh repo create zenn-articles --public --add-readme --clone
cd zenn-articles
npm init -y
npm install zenn-cli
npx zenn init
articles/、books/、README.md、.gitignore が自動生成されます。
4. テスト記事を作って push
published: false のテスト記事を作って push。
---
title: "デプロイテスト記事"
emoji: "🧪"
type: "tech"
topics: ["test"]
published: false
---
5. Zenn ダッシュボードで GitHub 連携設定
ダッシュボードの「GitHubからのデプロイ」から、リポジトリを連携。
このとき 「Only select repositories」 を選んで対象リポジトリだけを許可するのが Zenn 公式でも推奨されており、Claude Code が事前にその点を実行計画に含めてくれていました。
6. 手動デプロイで初回取り込み
連携前にすでに push していたので、初回だけ手動デプロイで取り込みました。デプロイ履歴に「成功」が出て、記事の管理に下書きが表示されたら完成です。
7. テスト記事を後片付け
ローカルから削除して push、ダッシュボードからも削除。両側で消さないと次回デプロイで復活するので注意。
学んだこと（落とし穴）
実際に動かして気づいた、または事前に教えてもらって助かった点を3つ。
1. 削除は GitHub と Zenn ダッシュボードの両側で行う
GitHubから記事ファイルを消すだけだと、Zenn ダッシュボードには下書きが残ります。逆に、ダッシュボードから消しただけだと、次回デプロイで GitHub の内容が反映されて復活します。
2. published: false でも push はされる
下書きでも GitHub には push します。Zenn 側で「下書き」ステータスになるだけ、という挙動です。
3. ブランチは main 一本でいい（個人運用の場合）
「執筆中はブランチ切って、PR経由でマージ」のようなフローも紹介されていますが、個人運用なら published フラグで下書きと公開を切り分ければ十分でした。Zenn は連携ブランチ1つだけを監視する仕様なので、複雑にする必要がなさそうです。
やってみた感想
- AIに伴走してもらうとリサーチが速い：自分が読みに行く前に、複数ソースの差分を整理して持ってきてくれる感覚
- 計画を立ててから実行する習慣がつきそう：いきなり手を動かす前に「正しいやり方を調べてから」というワンクッションが入る
- 手順を Markdown に残せるのが良い：今こうやって記事に書き起こすときも、AIとの会話ログがそのまま参考にできる
これから
学習ログを月2〜3本のペースで Zenn に書いていく予定です。これから TypeScript / React / Next.js を本格的に触り始めるので、つまずきと気づきを淡々と残していきます。
同じように「Web制作からフロントエンドへ」を目指している人や、「Claude Code とどう使い分けるか」を考えている人と、後で会話できるとうれしいです。
Discussion