🐈

ZennはVS Codeで書け！Git連携のすゝめ

に公開
Git
GitHub
VS Code
初心者
Zenn
tech

ZennはVS Codeで書け！ Gitリポジトリ連携のすゝめ

きっかけ

Zennでの記事投稿を始めたての筆者は、VS CodeにMarkDownの拡張機能をいくつか入れて執筆環境としていた。

すでに2本公開しているがスラッグ設定を見落としており、ランダムな文字列になってしまった。しかも後から変更できないのが痛い（リンク変わっちゃうので当たり前）。

ま、まあスラッグより？？記事の内容が100倍大事だし？？細かいこと気にしても仕方ないよな？？？と思っていたところ、 ClaudeからZenn CLIを紹介された。

導入するメリットは多数あるとのことで、MDで執筆した記事ファイルをGitHubのリポジトリで管理でき、スラッグや投稿日時もよしなに指定できるらしい。

固定観念で、リポジトリはソースコードを管理する場所っていうイメージしか無かったので、ドキュメント管理に用いるという発想は目からウロコだった。確かに差分管理できるしめっちゃ便利そう。

そんなこんなで、ウキウキしながら筆者は Zenn CLI を導入したのであった。

こんな人向けだよ

  • Zennで記事投稿を始めたばかり（筆者も同じく）
  • ブラウザで執筆&投稿は効率が悪いと感じている
  • 使い慣れたVS Codeで執筆作業をしたい

設定手順

設定箇所が複数あるのでちょっとややこしいけど、今回もねこさんと見ていこう🐈

前提条件

  • GitHubアカウントがある
  • Gitの基本的なコマンドがわかる（clone, add, commit, push）
  • Node.jsがインストールされてる

※ Node.jsがない人は公式サイトからLTS版をダウンロードだ！

1. GitHubでリポジトリを作成

GitHubにログインし、Repositoriesメニューを開いて新規作成。

タブメニューからリポジトリを選択

※ 画像はリポジトリ作成済みの場合の画面

設定項目

  1. リポジトリ名: zenn-contents とか
  2. 説明: 書きたかったら書く（任意）
  3. 公開範囲： Public（推奨）
  4. ADD README 何のこっちゃわからん人はOFFでヨシ（後から作れる）
  5. Add .gitignore: 必ずNodeを選択⚠️
  6. Add license: No license で問題ない
  7. 「Create repository」で作成！

リポジトリ新規作成ダイアログ

2. Zennと連携

GitHub側の準備ができたらZenn側をすすめていく。
下準備はできている状態だから、もう少しの辛抱だよ〜〜🌱

手順

  1. Zennのダッシュボードを開く
  2. GitHub連携メニューを開き、「リポジトリを連携する」をクリック
    GitHubとZennの連携開始
  3. 「連携へ進む」をクリック
    GitHubとZennの連携開始
  4. パスワードやアプリなど、任意の方法でGitHub認証する
    GitHubの認証
  5. 作成したリポジトリを選択
    GitHubの認証
  6. 連携完了！✌️
    GitHub連携完了
    これでGitHubにpushすると自動的にZennに反映されるようになる。

3. ローカルで環境構築

VS Codeのターミナルを開いて以下を実行

# リポジトリをクローン
git clone https://github.com/あなたのユーザー名/リポジトリ名.git
cd リポジトリ名

# Zenn CLIをインストール
npm init -y
npm install zenn-cli

# 初期化
npx zenn init

結果は画像の通りになるはず（※ スクリーンショットは2025-11-29時点）

コマンド実行後のディレクトリ構成

これで設定が完了、おつかれさまです〜〜〜🍵

記事を書いてみよう

1. ファイル作成

以下のコマンドを実行し、記事の元となるマークダウンファイルを作成する

# スラッグを指定して記事作成
npx zenn new:article --slug my-first-article

2. いざ、執筆

先ほど作成した記事がarticlesに生まれているので、そちらに本文を書いていこう。
マークダウンのための拡張機能がいくつかあるので、VS Codeに入れてから作業開始するとよい。

フロントマターの例

---
title: "記事のタイトル"
emoji: "🐈"
type: "tech"  # tech or idea
topics: ["zenn", "git", "github"]  # 最大5つ
published: false  # 公開する時は true
published_at: 2025-11-26 09:00  # 自動公開の日時（任意）
---

プレビューを見る方法

以下コマンドを実行。

npx zenn preview

ブラウザでhttp://localhost:8000にアクセスすると、Zennで公開した場合の記事の見え方を確認することができる。
ブラウザのリロードは必要なく、保存したらすぐ反映されるのがアツい。

3. 完成した記事をGitHubにpush

執筆したファイルをステージしたのちにコミット。問題なさそうならプッシュ。

git add .
git commit -m "記事を追加: 初めてのGit連携"
git push origin main
  • published: trueの場合、プッシュした瞬間に記事が投稿される。
  • published: falseの場合は、下書きとしてZennに反映される。
    published_atが記載されている場合は、その日時に自動公開される。

まとめ

Zenn CLI を使うとこれが良い！！

  • バージョン管理： GitHubのリポジトリと連携することで記事を過去の内容にすぐ戻せて安全🪴
  • 日時指定公開： 公開したいタイミングにZennにログインして作業する必要がない🦥
  • VS Codeで書ける： エンジニアみんなの実家、快適な執筆環境を展開だ〜🚀

初期設定はちょっと手間だけど、それに見合うメリットがあるのでぜひやってみてね

参考：公式による記事

詳しく記載されているので、もっと深く知りたいひとは覗いてみよう👀

GitHubで編集を提案

Discussion