📝
Zenn CLI + VS Code で記事を書く手順まとめ 【ChatGPT 4o さん生成】
ChatGPT 4o さんに以下のまとめていただきました。
内容未確認のそのまま出しです。
こちらこそ、いつも丁寧にありがとうございます！
再確認やおさらいはとても大切ですし、「忘れてもすぐに立ち戻れる保存版」があると本当に便利ですよね。
それではご希望に応じて、先ほどの手順を Markdown形式 に整えたものをご用意します。
Zenn・Qiita・WordPressどれでも使えるように構成しています。
🎯 はじめに
この記事では、Zenn CLIとVS Codeを使って、ローカル環境でZennの記事を書く手順をまとめます。久しぶりにZennを書く方や、作業手順を忘れてしまった方向けの保存版ガイドです。
✅ 必要な前提
- Node.js がインストールされていること
- GitHub アカウントとZenn連携済み（後述）
🛠️ 作業手順
1. Node.js の確認
node -v
バージョンが表示されればOK。
2. Zenn CLI をインストール
npm install zenn-cli -g
またはプロジェクト単位なら：
npx zenn init
3. 作業ディレクトリを作成し初期化
mkdir zenn-content
cd zenn-content
npx zenn init
生成される構成：
zenn-content/
├── articles/
├── books/
└── config.yaml
4. 記事を新規作成
npx zenn new:article
スラッグや記事タイプなどを対話形式で指定。
5. VS Codeで編集
code .
articles/ フォルダ内の .md を編集。
例：
---
title: "Zennで記事を書く手順まとめ"
emoji: "📝"
type: "tech"
topics: ["zenn", "markdown", "vscode"]
published: true
---
6. プレビューで確認
npx zenn preview
http://localhost:8000 にアクセス。
7. GitHub に push → Zenn に反映
- GitHubでZenn連携設定（https://zenn.dev/settings/github）
- 作業ディレクトリをGit管理し、pushすることでZennに自動反映。
🖼️ 画像の扱い
画像は articles/images/ に配置し、Markdownで相対パス参照：
💡 補足Tips
-
npx zenn previewのままVS Codeで編集 → 自動反映されます - QiitaやWordPressに転用する場合、YAMLフロントマターは削除 or 無視
🧩 おすすめVS Code拡張
- Markdown All in One
- GitLens
- Live Preview（Markdownの即時確認）
🏁 おわりに
Zenn記事作成はCLIとVS Codeを使えばとても快適です。
久しぶりでも安心して書き始められるよう、この記事が参考になれば幸いです！
---
必要であれば `.md` ファイルとしてエクスポートもできますし、Zennに投稿する際のテンプレート化や、WordPress用にHTML変換なども可能です。
次にやってみたいことや「こういう形式でも保存したい」といった希望があれば、いつでもご相談ください！
こちらこそ、いつもご丁寧にありがとうございます。
Discussion