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

![ロゴ mise pnpm qiita](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869171/aae9f48f-8787-4316-aae6-8e963f7d7da3.png)

## 目的

[mise en place と pnpm で Qiita CLI を導入](https://qiita.com/AMASAShiro/items/35bf120c868d5646fe06)した環境で記事を管理・執筆するなど運用する。

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

[運用方式](#運用の前提)で手順が違うところに注目してね。

## 関連記事

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

https://qiita.com/AMASAShiro/items/35bf120c868d5646fe06

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

https://qiita.com/AMASAShiro/items/22196acd12f006e66567

## 想定読者

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

## ツール

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

- **[mise](https://mise.jdx.dev/)** (2025.4.4 macos-x64 (2025-04-15))
- **[Node.js](https://nodejs.org/ja)** (23.11.0)
- **[pnpm](https://pnpm.io/ja)** (10.8.0)
- **[Qiita CLI](https://github.com/increments/qiita-cli)** (1.6.2)
  
- **[Visual Studio Code](https://code.visualstudio.com/)** (1.99.2)

<font color="red">**GitHub 運用**</font>時

- **[Git](https://git-scm.com/)** (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 環境で実行

## 機能

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

## 運用の前提

[導入時に定めた運用設計(導入編の記事)](https://qiita.com/AMASAShiro/items/35bf120c868d5646fe06#%E9%81%8B%E7%94%A8%E8%A8%AD%E8%A8%88)に基づく。下記は例。

- 管理方式: **ローカル運用**・ <font color="red">**GitHub 運用**</font>のどちらか
  - ローカル運用: 自分の 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 サイトでの記事を変更した場合

### 記事の一覧確認

```zsh:記事の一覧確認コマンド
cd ~/Documents/publish/qiita  # 記事フォルダに移動
pnpm qiita preview &
```

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

![[Qiita CLI プレビュー]](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869171/8cbde73d-a43a-4e5b-b8a5-1f5f22624795.png)

### 記事の作成

```zsh:記事の新規作成コマンド
pnpm qiita new 記事のベース名 # 拡張子は不要
```

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

#### 記事フォルダの構成

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

### 記事の執筆

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

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

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

https://qiita.com/AMASAShiro/items/22196acd12f006e66567#%E8%A8%98%E4%BA%8B%E3%81%AE%E5%9F%B7%E7%AD%86

### 記事の確認

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

```zsh: 記事の一覧確認コマンド
cd ~/Documents/publish/qiita  # 記事フォルダに移動
pnpm qiita preview &
```

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

### 記事の投稿

**ローカル運用**と <font color="red">**GitHub 運用**</font>で手順が違う。

#### **ローカル運用**

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

- 個別記事を投稿

```zsh:ローカル運用: 個別記事投稿コマンド
pnpm qiita publish 記事のベース名
```

- 複数記事を投稿

```zsh:ローカル運用: 全記事投稿コマンド
pnpm qiita publish --all
```

- 強制的に投稿

```zsh:ローカル運用: 強制投稿コマンド
pnpm qiita publish --force
```

#### <font color="red">**GitHub 運用**</font>

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

```zsh: GitHub 運用: コミットでローカル PC の main ブランチに反映する例
git add public/article-1.md
git commit -m "記事公開: article-1"
```

```zsh: GitHub 運用: ローカル PC の main ブランチを push する例
git pull origin main
git push -u origin main
# GitHub Actions の動作完了まで待つ 
git pull origin main
```

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

```zsh: main ブランチ変更のマージ例
switch ブランチ名
git merge origin main
```

### 記事の削除

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

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

#### 手順1: Qiita で記事を削除

[**Qiita**](https://qiita.com/) で記事を削除する。

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

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

**ローカル運用**と <font color="red">**GitHub 運用**</font>で手順が違う。

- **ローカル運用**  
  **記事フォルダ**にある削除記事を削除、または**削除記事フォルダ**に移動する。

- <font color="red">**GitHub 運用**</font>  
  GitHub 上の**記事リモートリポジトリ**から削除記事を削除する。  
  さらにローカル PC のファイルを削除、または**記事削除フォルダ**に移動する。

```zsh:削除記事を管理対象から除外し GitHub に反映する例
git rm --cached article-1.md # さくっとファイルを削除するなら --cached は不要
git push origin main
# GitHub Actions の動作完了まで待つ 
git pull origin main
```

### 記事の取得

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

```zsh: 記事の取得コマンド
pnpm qiita pull
```

```zsh: 記事の強制取得コマンド
pnpm qiita pull --force
```

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

<font color="red">**GitHub 運用**</font>の場合、取得した記事を GitHub の**記事リポジトリ**に反映する。

```zsh: 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 初心者(僕)にはバージョン管理やローカル・リモートのリポジトリに慣れるのにちょうどいいかな。

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

https://qiita.com/AMASAShiro/items/22196acd12f006e66567

# ツールへのリンク

https://github.com/increments/qiita-cli

https://mise.jdx.dev/

https://pnpm.io/

https://nodejs.org/ja

https://code.visualstudio.com/

https://git-scm.com/

https://brew.sh/ja/

https://learn.microsoft.com/ja-jp/windows/package-manager/winget/