Zenn
📔

Qiita・Zenn・noteを一元管理！GitHubで始める効率的な技術ブログ運営

に公開
GitHub
Zenn
Markdown
CLI
Qiita
tech

はじめに

はじめまして、ぐみと申します。

技術記事はQiitaとZennで、非エンジニア向けの記事はnoteで投稿することにしました。複数のプラットフォームを使い分けることで、読者層に応じた適切な発信ができると考えています。

この記事では、GitHubリポジトリを使用した効率的な記事管理の方法を紹介します。

なぜGitHubリポジトリで管理するのか

背景と課題

複数のプラットフォームで記事を投稿する中で、以下のような課題に直面しました：

  • 記事の更新履歴が追跡できない
  • 複数プラットフォームへの投稿作業が非効率
  • オフライン環境での執筆が難しい
  • 画像やコードの管理が煩雑

これらの課題を解決するために、GitHubリポジトリを使用した記事管理の仕組みを導入することにしました。

メリット

  • バージョン管理が可能
  • 記事の変更履歴を追跡できる
  • 複数プラットフォームへの投稿を一元管理できる
  • Markdown形式で記事を管理できる
  • CI/CDによる自動デプロイが可能
  • オフライン環境でも編集作業が可能

記事執筆環境の構築

1. Qiita CLIのセットアップ

# プロジェクトにQiita CLIをインストール
npm install @qiita/qiita-cli --save-dev

# 初期化
npx qiita init

# ログイン
npx qiita login

詳細はQiita CLIの利用方法を参照してください。

2. Zenn CLIのセットアップ

# プロジェクトを初期化
npm init --yes

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

# 初期化
npx zenn init

詳細はZenn CLIのインストール方法を参照してください。

リポジトリ構成

.
├── public/     # Qiita用記事
├── books/      # Zenn用書籍
├── articles/   # Zenn用記事
├── images/     # Zenn用画像ファイル
├── note/       # note用記事
└── README.md   # リポジトリの説明

投稿フロー

1. Qiitaへの投稿

# 記事の作成
npx qiita new 記事のファイルのベース名

# プレビュー
npx qiita preview

# 記事の公開
npx qiita publish 記事のファイルのベース名

2. Zenn（Article）への投稿

# 記事の作成
npx zenn new:article --slug 20240101_article-name

# プレビュー
npx zenn preview

# 記事の公開（GitHubリポジトリにプッシュ）
git add .
git commit -m "Add new article"
git push origin main

3. noteへの投稿

  1. ローカルでMarkdownファイルを作成
  2. プレビューで内容を確認
  3. noteの投稿画面に内容をコピー
  4. 最終確認後、投稿

記事管理のベストプラクティス

1. ファイル命名規則

  • 日付_タイトル.md の形式を使用
  • 例: 20240320_tech-blog-management.md

2. 画像管理

Qiita

  • ローカルでの画像管理は不可
  • 記事作成時にプレビューから画像をアップロード
  • アップロードした画像はQiitaのサーバーで管理
  • 画像はGithubのレポジトリにプッシュしてURLを埋め込むことにしました（2025/06/02更新）
    • GitHubリポジトリの画像直リンク: https://raw.githubusercontent.com/ユーザー名/リポジトリ名/main/パス/画像.png

Zenn

  • ローカルで画像を管理可能
  • 記事ごとに専用の画像ディレクトリを作成
    images/
└── 20240320_tech-blog-management/
    ├── 01_overview.png
    ├── 02_implementation.png
    └── 03_result.png
  • 画像はGitHubリポジトリで管理

note

  • ローカルで画像を管理可能
  • 記事ごとに専用の画像ディレクトリを作成
  • 画像はGitHubリポジトリで管理
  • 投稿時に画像をアップロード

導入後の効果

  • 記事の更新履歴が明確になり、品質管理が容易に
  • 複数プラットフォームへの投稿作業が効率化
  • オフライン環境でも執筆可能に
  • 画像やコードの管理が一元化

まとめ

GitHubリポジトリを使用した技術記事の管理は、記事の一元管理を実現し、複数プラットフォームへの投稿を効率化します。また、記事の更新履歴を明確にすることで、品質管理も容易になります。

この記事で紹介した方法を参考に、あなたの記事管理の効率化に役立てていただければ幸いです。

おまけ：関連記事のご紹介

この記事の執筆にあたり、投稿プラットフォームの使い分けについて考えた記事をnoteに投稿しました。技術記事の管理方法を考える上で、参考にしていただければ幸いです。

参考リンク

更新履歴

  • 2025/06/02: Qiitaの画像管理方法を更新（GitHubリポジトリでの管理に変更）
  • 2025/06/02: Zenn CLIの記事作成コマンドを更新（--slugオプションを使用する方法に変更）
  • 2025/05/28: 初版公開

Discussion