💻
Zenn CLI × GitHub連携で記事管理を快適にする方法
はじめに
こんにちは、田中涼平（@RyoheiTanaka）です。
Zennは手軽に技術記事を投稿できる素晴らしいサービスですが、Webエディタだけでは少し物足りなさを感じる場面もあります。たとえば、
- スラッグ（URL末尾）を自由に決められない
- 普段使い慣れたエディタで作業できない
- 修正履歴の管理がしにくい
こういった課題を解決するために、Zenn CLIとGitHub連携を導入しました。今回はその方法と、効率的な記事運用のための工夫をご紹介します。
なぜCLI＆GitHub連携を導入したのか
CLIとGitHubを使えば、以下のようなメリットがあります：
- スラッグを自由に決められる
- Gitで修正履歴を明確に管理できる
- お気に入りのエディタで快適に執筆可能
- 記事や画像をローカルで一元管理できる
Zenn CLIのインストールと初期化
npm install zenn-cli -g
mkdir zenn-contents && cd zenn-contents
zenn init
GitHubリポジトリの準備と連携
git init
git remote add origin https://github.com/yourname/zenn-contents.git
git add .
git commit -m "initial commit"
git push -u origin main
記事テンプレート作成スクリプトの活用
毎回手作業で記事ファイルを作るのは手間がかかるので、以下のようなスクリプトを使って記事テンプレートを一発生成しています：
#!/bin/bash
TITLE="$1"
SLUG="$2"
if [ -z "$TITLE" ] || [ -z "$SLUG" ]; then
echo "❌ タイトルとスラッグを両方指定してください。"
echo "例: ./scripts/create-article.sh \"Pest導入メモ\" \"laravel-pest-intro\""
exit 1
fi
FILENAME="articles/${SLUG}.md"
cat > "$FILENAME" <<EOL
---
title: "${TITLE}"
emoji: "🧪"
type: "tech"
topics: ["Laravel", "PHP", "テスト"]
published: false
slug: "${SLUG}"
summary: ""
---
## はじめに
こんにちは、田中涼平（[@RyoheiTanaka](https://github.com/RyoheiTanaka)）です。
<!-- 本文ここから -->
---
## 🚀 田中涼平の他の活動
- 🌐 ポートフォリオ: [https://coolat.net](https://coolat.net)
- 🧑💻 GitHub: [https://github.com/RyoheiTanaka](https://github.com/RyoheiTanaka)
- 🐦 X (Twitter): [https://x.com/ryohei_dev](https://x.com/ryohei_dev)
- 📝 Zenn: [https://zenn.dev/ryohei_tanaka](https://zenn.dev/ryohei_tanaka)
---
EOL
echo "✅ 記事ファイルを作成しました: ${FILENAME}"
これを scripts/create-article.sh として保存しておけば、以下のように一発で記事作成が可能です：
./scripts/create-article.sh "記事タイトル" "記事スラッグ"
テンプレートにはプロフィールやリンクも自動で挿入されるので、毎回のコピペの手間が省けて超便利です。
画像管理と設置ルール
- 画像は
images/{スラッグ}/に配置 - Markdownからは相対パスで参照
Git管理と運用ルール
- 記事作成は
feature/スラッグ名ブランチで行う - コミットは粒度を小さく、差分がわかりやすいように
-
mainブランチは常に公開できる状態に保つ - ローカルプレビューは
npx zenn previewで確認
README.md & CONTRIBUTING.md による運用ルールの明文化
リポジトリ構成（README.mdより抜粋）
articles/ # 記事ファイル（.md）
images/{スラッグ}/ # 記事ごとの画像
scripts/ # 記事作成スクリプト
.github/ # アイデア投稿テンプレートなど
記事作成ルール（CONTRIBUTING.mdより抜粋）
- スラッグ＝ファイル名＝URL末尾
- Frontmatterを必ず記述
- Markdownからは画像を相対パスで参照
ブランチ＆進捗管理
-
feature/ブランチで作業 - GitHub Issuesで記事アイデア投稿＋進捗管理（
idea,draft,review,published）
まとめ
Zenn CLI × GitHub連携のメリットは以下の通りです：
- スラッグ・ファイル・画像を自由に管理
- Gitでバージョン管理しやすい
- VS Codeなどで快適に執筆
- スクリプトでテンプレ化して効率化
- 運用ルールを明文化して迷いゼロ
Zennを開発の一部として捉えるなら、この運用は非常におすすめです。ぜひ取り入れて、あなたの執筆ライフを快適にしてみてください！
🚀 田中涼平の他の活動
- 🌐 ポートフォリオ: https://coolat.net
- 🧑💻 GitHub: https://github.com/RyoheiTanaka
- 🐦 X (Twitter): https://x.com/ryohei_dev
- 📝 Zenn: https://zenn.dev/ryohei_tanaka
Discussion