Zenn記事の執筆を効率化！VSCode × GitHub × Zenn CLI 活用術
はじめに
Zennで記事を投稿したいけど、時間もないし面倒なんだよねえ…。そんな悩みを抱えていませんか？
実は、VSCodeとZenn CLIを使えば、普段使い慣れたエディタで記事を書き、GitHubにプッシュするだけでZennへの投稿や更新が自動で完了します。
この記事では「効率的なZenn記事執筆フロー」を、実体験を交えて詳しく解説します（この記事は実際に Zenn CLI を利用して投稿しました）
この記事でわかること
- Zenn CLIの導入方法と基本的な使い方
- VSCodeで記事をMarkdown形式で効率よく執筆するコツ
- GitHub連携による自動投稿・更新フロー
- 画像やアイキャッチ、トピックの設定も一括管理する方法
- 投稿・更新作業をスピーディに進めるためのTips
対象読者・前提条件
- Zennで記事投稿を効率化したいビジネスパーソン
- Markdownにある程度慣れている方
- GitHubアカウントを持っている、またはこれから作成予定の方
- VSCodeを普段から使っている、または使ってみたい方
動作環境・使用ツール
- Zenn CLI（記事管理・投稿の自動化ツール）
- Node.js（Zenn CLI動作に必須）
- Visual Studio Code（エディタ）
- GitHub（バージョン管理・Zenn連携用）
手順
1. Zenn CLIのインストール・セットアップ
Node.jsをインストールした後、Zennのコンテンツを管理したいディレクトリで、以下を実行します。
$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入
記事管理用のディレクトリでセットアップを行います。
$ npx zenn init
これでarticlesやbooksディレクトリが自動生成されます。
2. GitHubとZennを連携する
投稿用のリポジトリを作成し、
Zennのダッシュボードから連携します。
3. 新規記事の作成
$ zenn new:article
このコマンドで、articlesディレクトリ内にMarkdownファイルが生成されます。
ファイルの冒頭にはタイトルやアイキャッチ絵文字、トピックなどの設定欄（Front Matter）が用意されています。
---
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
---
ここから本文を書く
4. VSCodeで記事を執筆
生成されたMarkdownファイルをVSCodeで開き、本文を執筆します。
MarkdownはAIとの相性が良いため、文章の構成や伝えたい内容をプロンプトとして入力するだけで、草案の作成や校正もスムーズに進められます。
5. プレビューで確認
執筆中に以下のコマンドでローカルプレビューが可能です。
$ zenn preview
ブラウザでhttp://localhost:8000にアクセスし、見た目やレイアウトを確認しましょう。
6. GitHubにプッシュ
執筆が完了したら、変更をコミットしてGitHubにプッシュします。
7. Zennに自動反映
GitHubとZennを連携していれば、プッシュした内容が自動でZennに反映されます。
Zennのダッシュボードで記事の内容や公開設定を最終確認しましょう。
応用例・実践Tips
- アイキャッチ絵文字やトピックなども、MarkdownのFront Matterで一括管理可能できる
- 画像は
imagesディレクトリに保存し、Markdownで絶対パス指定するだけでOK - 記事の修正や更新も、Markdownを編集してプッシュするだけで反映
注意点
- 記事ファイルは
articlesディレクトリ直下に配置する必要があります（サブディレクトリ不可） - Zenn CLIのアップデートやNode.jsのバージョン管理にも注意
- 初回はZennとGitHubの連携設定を忘れずに
まとめ
Zenn CLIとVSCode、GitHubを組み合わせれば、記事投稿も更新も驚くほど効率化できます。
AIとの親和性も高く、Markdownベースで作業することで自動化やコラボレーションも簡単。
「Webエディタでの執筆に限界を感じている」「もっとスピーディにアウトプットしたい」という方は、ぜひこの方法を試してみてください。
Discussion