【サクッと投稿】mise & pnpm & GitHub 連携で Qiita CLI で記事管理！ - 運用編シンプル版

Posted at 2025-04-22

目的

mise en place と pnpm で Qiita CLI を導入した環境で記事を管理・執筆するなど運用する。

Qiita CLI を導入して、さあ記事書こってしたら公式記事に運用についての情報があんまりなくって困ったのでシェア。

運用方式で手順が違うところに注目してね。

導入について知りたいときにどうぞ。

詳細版。わからないことがあるときにどうぞ。

想定読者

Qiita CLI を使って記事を投稿したい (GitHub 連携含む)
mise-en-place や pnpm を使ってみたい
Homebrew, VSCode, git, GitHub を使える (インストール・設定済み)

ツール

括弧内は導入時のバージョン。

mise (2025.4.4 macos-x64 (2025-04-15))
Node.js (23.11.0)
pnpm (10.8.0)
Qiita CLI (1.6.2)
Visual Studio Code (1.99.2)

GitHub 運用時

Git (2.49.0)

動作確認環境は以下。これを前提に説明する。
Windows ではパッケージマネージャやフォルダパスなどを読み替えてください。

MacBook Air Retina, 13-inch, 2018 Intel
MacOS Sonoma 14.7.5

Qiita CLI

自分の PC のエディタで記事がかける
記事を書いたらコマンドで Qiita に投稿する
GitHub 運用では GitHub に記事を反映したら Qiita に自動投稿
TypeScript のプログラム。Node.js 環境で実行

機能

記事の作成
記事のプレビュー
記事の投稿
記事の取得

運用の前提

導入時に定めた運用設計(導入編の記事)に基づく。下記は例。

管理方式: ローカル運用・ GitHub 運用のどちらか
- ローカル運用: 自分の PC で記事管理
- GitHub 運用: GitHub のリポジトリで記事管理
フォルダ
- 記事フォルダ : ~/Documents/publish/qiita
- 削除記事フォルダ : ~/Documents/publish/qiita/deleted (.gitignore で追跡対象外に指定)
記事リモートリポジトリ : git@github.com:AmasaShiro/qiita.git

Qiita CLI のコマンドを使うときはインターネット接続が必要。

運用の流れ

準備
記事の一覧確認 : プレビュー機能で管理画面を起動
通常作業
1. 記事の作成
2. 記事の執筆
3. 記事の確認
4. 記事の投稿
個別作業
- 記事の削除
- 記事の取得
  - Qiita CLI 運用前に既存記事を取り込む
  - Qiita サイトでの記事を変更した場合

記事の一覧確認

記事の一覧確認コマンド

cd ~/Documents/publish/qiita  # 記事フォルダに移動
pnpm qiita preview &

ローカル PC で Web サーバーが起動、ブラウザでプレビュー画面が表示される。Articles で分類をクリックすると記事一覧を確認できる。

記事の作成

記事の新規作成コマンド

pnpm qiita new 記事のベース名 # 拡張子は不要

記事投稿時の挙動を制御するフロントマターを含んだファイルが作成される。

記事フォルダの構成

記事フォルダ
└─ public
   ├── .remote/ # 記事の取得コマンドが使用
   ├── article-1.md
   ├── :
   └── article-n.md

記事の執筆

Qiita CLI で執筆するには以下 3 点について把握する。

記事ファイルのフロントマターの指定
Qiita Markdown の知識
画像の扱い

詳細は以下を参照してください。

記事の確認

まだ記事の一覧確認のコマンドを実行していない場合はプレビューコマンドを実行する。

記事の一覧確認コマンド

cd ~/Documents/publish/qiita  # 記事フォルダに移動
pnpm qiita preview &

ブラウザで記事を選択し確認する。

記事の投稿

ローカル運用と GitHub 運用で手順が違う。

ローカル運用

記事フォルダでコマンドを実行する。

個別記事を投稿

ローカル運用: 個別記事投稿コマンド

pnpm qiita publish 記事のベース名

複数記事を投稿

ローカル運用: 全記事投稿コマンド

pnpm qiita publish --all

強制的に投稿

ローカル運用: 強制投稿コマンド

pnpm qiita publish --force

GitHub 運用

GitHub の main ブランチに変更を反映する。以下は git コマンドでの例。

GitHub 運用: コミットでローカル PC の main ブランチに反映する例

git add public/article-1.md
git commit -m "記事公開: article-1"

GitHub 運用: ローカル PC の main ブランチを push する例

git pull origin main
git push -u origin main
# GitHub Actions の動作完了まで待つ 
git pull origin main

ブランチをわけている場合、 main ブランチの変更を反映する。

main ブランチ変更のマージ例

switch ブランチ名
git merge origin main

記事の削除

次の 2 手順で記事を削除する。

Qiita で記事を削除
記事管理場所から記事を削除

手順1: Qiita で記事を削除

Qiita で記事を削除する。

公開記事: Qiita 【マイページ】から削除
限定共有記事: Qiita 【限定共有記事】から削除

手順2: 記事管理場所から記事を削除

ローカル運用と GitHub 運用で手順が違う。

ローカル運用
記事フォルダにある削除記事を削除、または削除記事フォルダに移動する。
GitHub 運用
GitHub 上の記事リモートリポジトリから削除記事を削除する。
さらにローカル PC のファイルを削除、または記事削除フォルダに移動する。

削除記事を管理対象から除外し GitHub に反映する例

git rm --cached article-1.md # さくっとファイルを削除するなら --cached は不要
git push origin main
# GitHub Actions の動作完了まで待つ 
git pull origin main

記事の取得

Qiita に既存記事がある、Qiita の Web エディタで記事を操作したなどの場合、ローカル PC に記事を取得する。

記事の取得コマンド

pnpm qiita pull

記事の強制取得コマンド

pnpm qiita pull --force

public フォルダに UUID記事.md という名前で記事ファイルができる。ファイル名を変更してもよい。

GitHub 運用の場合、取得した記事を GitHub の記事リポジトリに反映する。

GitHub 運用: 取得記事の GitHub への反映

git add public/article-1.md
git commit -m "pullした記事の反映"
git pull origin main
git push origin main
# GitHub Actions の動作完了まで待つ 
git pull origin main

さいごに

運用もわかればシンプル。ただ Qiita サイトで記事を変更したときはちょっと面倒。

あと git, GitHub 初心者(僕)にはバージョン管理やローカル・リモートのリポジトリに慣れるのにちょうどいいかな。

もっと詳しく知りたいときはこちらをどうぞ。

ツールへのリンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【サクッと投稿】mise & pnpm & GitHub 連携で Qiita CLI で記事管理！ - 運用編 シンプル版

目的

関連記事