ZennのGitHub連携のやり方｜リポジトリで記事を管理する
ZennのGitHub連携とは
Zennは、Webエディタで記事を書くほかに、GitHubリポジトリと連携してMarkdownファイルから記事を公開・更新する方法があります。連携すると、ローカルでファイルを書いてgit pushするだけで記事が反映され、バージョン管理やバックアップもGitに任せられます。コードと同じワークフローで記事を扱いたい人に向いた方法です。
準備するもの
- Zennのアカウント
- 記事を置くGitHubリポジトリ(GitHub側で先に作成しておく)
- (任意)ローカルで執筆・プレビューするためのNode.js環境
ダッシュボードでリポジトリを連携する
Zennのダッシュボードにある「GitHubからのデプロイ」から「リポジトリを連携」を選び、対象のリポジトリを指定します。連携の許可はGitHub側で行います。
注意点として、連携できるリポジトリは最大2つまでです。3つ以上を選択すると連携に失敗します。連携後は「リポジトリ設定」タブで、同期するブランチを確認・変更できます。
記事ファイルを用意する(zenn-cli)
記事ファイルは手で作ってもよいですが、公式のzenn-cliを使うと雛形作成やプレビューが楽になります。Node.jsを入れたうえで、リポジトリのルートで初期化します。
npx zenn init
これで記事を置くためのarticlesフォルダなどが作られます。新しい記事の雛形は次のコマンドで作成できます。
npx zenn new:article
--slug・--title・--type・--emojiといったオプションで初期値を指定することもできます。
ローカルでプレビューする
公開前に表示を確認したいときは、プレビューコマンドを使います。
npx zenn preview
既定ではlocalhost:8000でプレビューが立ち上がります。--portでポート番号を変えることもできます。
Front Matterと公開設定
記事ファイルの先頭には、次のような設定(Front Matter)を書きます。
title: "記事のタイトル" emoji: "😀" type: "tech" topics: ["zenn", "github"] published: true
emoji: アイキャッチに使う絵文字を1文字type:tech(技術記事)またはidea(アイデア記事)topics: タグを配列で指定published:trueで公開、falseで下書き
published: trueにしてリポジトリにpushすると、連携先ブランチの内容がZennに反映され、記事が公開されます。内容を直してpushし直せば、そのまま更新されます。
記事を削除するときの注意
連携運用では、記事の削除に少し注意が必要です。リポジトリにファイルが残ったままダッシュボードで記事を削除しても、次回のデプロイで記事が復活します。完全に削除したいときは、リポジトリ側で該当ファイルを削除してpushし、ダッシュボードでも削除する、というように両方で消すのが確実です。
まとめ
- ダッシュボードの「GitHubからのデプロイ」でリポジトリを連携(最大2つまで)
- zenn-cliで雛形作成・プレビュー、Front Matterの
publishedで公開/下書きを切り替え - pushで公開・更新、削除はリポジトリとダッシュボードの両方で行う
普段からGit中心で作業している人なら、記事もコードと同じ流れで管理できるのは大きな利点です。
補足: GitHub連携でローカル執筆する場合は対象外ですが、ZennのWebエディタ上で書くときの補助として、筆者はzenn.devの執筆画面にAI補助サイドバーを足す非公式のChrome拡張「Zenn-AI+」(個人開発・BYOK=自分のClaude/OpenAIキーで動作)を作っています。技術タイトル候補や章立ての叩き台などに使えます。