QiitaCLI を使って Qiita の記事を GitHub 管理する方法

[VISIONARY JAPAN Advent Calendar 2023](https://qiita.com/advent-calendar/2023/visionary-jp) 17日目の投稿です！！
12月16日の投稿は[@m0216i](https://qiita.com/m0216i)さんの [初心者向け - React Redux 基礎まとめ](https://qiita.com/alnais02/items/58a11dac933fc2917231) - でした！

https://qiita.com/alnais02/items/58a11dac933fc2917231

# GitHub 管理する方法
:::note info
この記事も Qiita CLI を使って執筆しました
:::
Qiita の記事を GitHub 管理する方法は以下で [Qiita](https://qiita.com/Qiita) さんが出してくれてますが、自分なりにまとめてみました。
よかったら参考にしてみて下さい。


### 1. GitHub で Qiita 記事を管理するためのリポジトリを作成する
自分のプロフィールのトップの Repositories タブをクリックして緑の New ボタンをクリックします。
![スクリーンショット 2023-11-08 21.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/0dc52660-6674-885c-28f4-4d70f6665472.png)

そしてここから新しいリポジトリを作成します。

![スクリーンショット 2023-11-08 21.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/3fda28bb-3736-7746-ce97-c4a61e25c6b1.png)

### 2. GitHub Actions の Secrets に Qiita トークンを設置する
まずはアクセストークンを発行します。
[こちら](https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli)に遷移してそのまま「発行する」ボタンをクリックしてください。（アクセストークンの説明の変更をしたい場合は任意のものに変更してください）
表示されたアクセストークンは控えておいてください。

:::note warn
再度アクセストークンを確認することはできませんのでご注意ください。
:::
次に GitHub に移動して、Settings タブをクリック、左のメニューの `Secrets and variables` の `Actions` を選択し、`New repository secret` をクリックします。
![スクリーンショット 2023-11-08 22.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/94e39cb1-8ee9-53ad-cefa-6e7ecb481f02.png)

`Name` には`QIITA_TOKEN`を、`Secret` には先ほど発行したトークンを設定してください。
![スクリーンショット 2023-11-08 22.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/b58df3f0-360f-5318-6b76-9e1f97cc4af5.png)
そして「Add secret」ボタンをクリックしたらトークンの設定は完了です。

### 3. Qiita CLI の導入
ご自身の PC の Qiita の記事を管理したい任意のディレクトリで以下コマンドを実行してください。

:::note warn
Node.js 18.0.0 以上が必要です
:::
```
node -v
```
これでバージョンが出ない場合はまず `Node.js` のインストールをしてください。
バージョンが出た場合、`18.0.0`未満であればアップデートをして`18.0.0`以上にしてください。
そして`Node.js`のバージョンが`18.0.0`以上であること確認したら、以下コマンドを実行してください。
```
npm install @qiita/qiita-cli --save-dev
```
以下コマンドでバージョンが出ればインストール完了
```
npx qiita version
```
続けて以下コマンドを実行してください
```
npx qiita init
```
このコマンドで以下のファイルが生成されます。
- .github/workflows/publish.yml
- .gitignore
- package-lock.json
- package.json
- qiita.config.json

次に Qiita CLI にログインするために以下コマンド実行してください。
```
npx qiita login
```
このコマンドを打つとアクセストークンの入力が求められるので先ほど控えておいたアクセストークンを入力して「Enter」を押してください。
ログインが完了すれば執筆を始めることができます！

### Qiita 記事を GitHub に push する
今まで執筆した Qiita の記事を以下コマンドでローカルに持ってきましょう！
```
npx qiita pull
```
Qiita 上のファイルを強制的に反映させたい場合は以下コマンドを実行して下さい
```
npx qiita pull --force
```
すると public ディレクトリ配下に今まで執筆した Qiita の記事が md ファイルとして取得できたと思います。
これを最初に作成した Qiita 記事を管理するリポジトリに push していきます。
```
git init
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:xxxxxxxxxxxxx.git // ここはご自身のリポジトリに合わせて変更してください
git push -u origin main
```
GitHub を確認するとうまく push されていると思います。

### 記事の作成方法
Qiita Preview を使うとブラウザでプレビューしながら記事を執筆する事が出来ます。
以下コマンドを実行して下さい。
```
npx qiita preview
```
そうすると[http://localhost:8888/](http://localhost:8888/)にアクセス出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/b51907e2-7488-1788-6da7-0a5778929c7e.png)

左のメニューの「新規記事作成」をクリックすると新しく記事を作成する事が出来ます。
クリックすると以下のような画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/dbbdaa8f-c608-9a29-f5c4-32923d4a82ef.png)
コマンドから新規ファイルを作成する場合は、以下コマンドを実行して下さい。
```Bash
npx qiita new newArticle002 # newArticle002.md ファイルが作成されます
```
この時点で自動で`newArticle002.md`というファイル名、そして以下のような内容の新規ファイルが作成されています。
```md:newArticle002.md
---
title: newArticle002
tags:
  - ''
private: false
updated_at: ''
id: null
organization_url_name: null
slide: false
ignorePublish: false
---
# new article body
```
それぞれの説明は以下です。
```md:newArticle002.md
---
title: QiitaCLI で GitHub 管理してみた # 記事のタイトル
tags: # 記事のタグ
  - Qiita
  - GitHub
  - QiitaCLI
private: false # true: 限定共有記事 / false: 公開記事
updated_at: '' # 記事を投稿した際に自動的に記事の更新日時に変わります
id: null # 記事を投稿した際に自動的に記事のUUIDに変わります
organization_url_name: https://qiita.com/organizations/visionary-jp # OrganizationのURL(限定共有記事には紐付け出来ません)
slide: false # true: スライドモードON / false: スライドモードOFF
ignorePublish: false # true: `publish`コマンドにおいて無視されます（Qiitaに投稿されません） / false: `publish`コマンドで処理されます（Qiitaに投稿されます）
---
# new article body
```
一番下の`# new article body`の箇所に記述していくことで記事を執筆していく事が出来ます。
地味に嬉しいのはホットリロードが有効になっているのでわざわざリロードする手間がない事です！
記事の中で画像を使用したい場合は左のメニューの「画像をアップロードする」からアップロードして下さい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/e90b6f2b-2d89-9e47-2b92-aa0c55d2dbb9.png)
ここにアップロードする場合は制限があるようで、1ヶ月で 100MB まではアップロード出来るようです。

### 記事の投稿・更新の方法
記事が完成したら記事を公開しましょう！
方法はとても簡単で main ブランチに対して push するだけです。
push するだけで記事の投稿・更新ができます。
main ブランチに push をすると GitHub Action が自動で実行され、Qiita 上との差分があるファイルのみ Qiita に反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934895/ce810e07-0ddc-87a9-88f7-32a74d352024.png)

:::note info
Qiita Preview 上やコマンドからも記事の投稿・更新は可能です
:::
push する以外にも以下コマンドや、Qiita Preview 上の「記事を投稿する」ボタンからも記事の投稿・更新をする事が出来ます。
```Bash
npx qiita publish 記事のファイルのベース名 # newArticle001.md だった場合は newArticle001
npx qiita publish --all # 全ての記事を反映
npx qiita publish 記事ファイルのベース名 --force # 強制的に記事ファイルの内容を Qiita に反映
```

:::note warn
記事の削除は Qiita 上からしか削除出来ません
:::

この記事を参考に Qiita CLI を使用してみて下さい！！

### 参考
https://qiita.com/Qiita/items/32c79014509987541130

https://github.com/increments/qiita-cli#qiita-cliqiita-preview-%E3%81%B8%E3%82%88%E3%81%86%E3%81%93%E3%81%9D