【導入10 分】 mise & pnpm & GitHub 連携で Qiita CLI をセットアップ！ - 導入編シンプル版

Last updated at 2025-04-22Posted at 2025-04-22

目的

mise en place と pnpm で Qiita CLI を導入する。GitHub 連携の設定もする。

導入が終わって記事を書き始めるときにどうぞ。

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

想定読者

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)
パッケージマネージャー
- macOS : Homebrew (4.4.31)
- Windows : winget
  など

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
記事リモートリポジトリ : 以下例
- リポジトリ名 : qiita
- デフォルトブランチ : main
- 公開範囲 : Private
- Add a README file : なし
- Add .gitignore : None
- Choose a license : None

Qiita で削除した記事のファイルが不要なら削除記事フォルダは不要
記事リモートリポジトリ
- リポジトリ名は記事フォルダ名になる (クローン時)
- デフォルトブランチは main または master
- 公開範囲は Private, Public どちらでもよい

導入準備

フォルダ作成

ローカル運用と GitHub 運用で手順が違う。
Qiita で削除した記事を PC に残したい場合、削除記事フォルダを作成する。

ローカル運用

mkdir -p ~/Documents/publish/qiita # 記事フォルダ
mkdir -p ~/Documents/publish/qiita/deleted  # 削除記事フォルダ

GitHub 運用

mkdir ~/Documents/publish
cd ~/Documents/publish
git clone 記事リモートリポジトリの url # 記事フォルダができる
mkdir -p ~/Documents/publish/qiita/deleted # 削除記事フォルダ
echo deleted >> .gitignore

Qiita アクセストークン作成

Qiita にログイン
メニューから【設定】→【アプリケーション】→【個人用アクセストークン】にある【新しくトークンを発行する】をクリック
表示された画面で以下の内容を入力して【発行する】をクリック
- アクセストークンの説明 : なんでも良い例) github_qiita
- スコープ : read_qiita, write_qiita にチェック
Qiita アクセストークンが表示されたらコピー。なくさないように。知られないように。

GitHub にQiita アクセストークンを登録

GitHub 運用する時はこの手順を実施する。
Secret の Name は必ず QIITA_TOKEN にする。

GitHub にログイン
記事リモートリポジトリを表示
【Settings】→【Security / Secrets and variables】→【Actions】で表示される画面で【New repository secret】をクリック
以下の内容を入力して【Add secret】をクリック
- Name : QIITA_TOKEN
- Secret : 発行された Qiita アクセストークン

Qiita CLI の導入

下記コマンドでツールをインストール・設定する。

ツール導入・セットアップと記事フォルダをリモートリポジトリに反映

# mise
brew install mise
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc
mise --version # 動作確認

# node / pnpm
cd ~/Documents/publish/qiita # 記事フォルダに移動
mise use node@latest
mise use pnpm@latest
pnpm init

# Qiita CLI
pnpm install @qiita/qiita-cli
pnpm qiita init # 初期化。pnpxではエラーになった
pnpm qiita version # 動作確認

# GitHub 運用時は GitHub に反映
git add *
git commit -m "Initial Commit"
git push -u origin main # GitHub Actions のエラー (public がない)は気にしない

# Qiita 認証情報設定
pnpm qiita login

以下のメッセージが表示されるので Qiita アクセストークンを入力する。

Qiita アクセストークンの入力

以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli
  
発行したトークンを入力: # ここで Qiita アクセストークンを入力

Qiita CLIの設定

限定共有記事を扱う時は設定ファイル 記事フォルダ/qiita.config.json を変更する。

変更後の qiita.config.json 例

{
  "includePrivate": true,
  "host": "localhost",
  "port": 8888
}

補足 Qiita CLI のアップデート

必要があればコマンドを実行する。

Qiita CLI アップデートコマンド

pnpm update @qiita/qiita-cli --latest

Qiita CLI 導入完了 - さいごに

とってもシンプルで 10 分で導入できそうでしょ？
実は詳細版だと作業が大変そうにみえたのでこの記事を書きました。

記事を書き始めるならこちらをどうぞ。

ツールへのリンク

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

【導入10 分】 mise & pnpm & GitHub 連携で Qiita CLI をセットアップ！ - 導入編 シンプル版

目的

関連記事