Qiita CLI で自分の書いた記事をpullして後からファイル管理する！

# こんなかんじで
![cap0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/bbea89e4-8c75-a2f0-7239-4e6a1048bc25.png)

記事をローカルでmdファイル管理したいです。
Qiita CLIを使って実現してみます。

# Qiita CLIとは？
Qiitaが提供しているNode製のqiita記事管理ライブラリです。

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

ライブラリを使用することで、ローカル環境での記事執筆などが行えます。

ローカルでの記事の管理やgithubとの連携などは以下の記事に**全部**載っているので、CLIで記事の投稿などを行いたい方はぜひ参考にしてください。

https://qiita.com/minorun365/items/d1c43f9a7ae63b3321f2

今回はこのツールの```pull``` コマンドを使用して今まで書いた記事を後からローカル管理できるようにしてみます。

# やってみる
## プロジェクトの用意

```bash
$ mkdir qiita
```

```bash
$ cd qiita/
```

センスなしのディレクトリを作成します。
qiita cli はnodeで動くので、npm init していきます。

```bash
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.       

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (qiita)
version: (1.0.0)
description:
entry point: (index.js)
test command: 
git repository:
keywords:
author:
license: (ISC)
About to write to /mnt/c/work/repo/qiita/package.json:

{
  "name": "qiita",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
```

qiita CLIをプロジェクトに追加します。

```bash
$ npm install @qiita/qiita-cli --save-dev

added 128 packages, and audited 129 packages in 22s

37 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

正常にインストールされたか確認します。

```bash
$ npx qiita version
1.6.1
```

## configする
### アクセストークンを発行する

https://qiita.com/settings/tokens/new に移動し、CLI用のアクセストークンを発行します。

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/9d6bb779-2440-5c54-f3e0-f6e99f194503.png)

個人アカウントなので、チーム用の権限は選択しないでおきます。

![cap1_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/09bdf547-d313-c3b3-a2c2-7e7f935b9792.png)

「トークンを発行」をクリックし、アクセストークンを発行します。

![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/3c125dc2-43b5-b156-378c-6aad3c8e4348.png)

一度しか表示されないらしいのでしっかりメモします。

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/8bc3dd62-3220-0cb6-d8ed-37324bd58457.png)

記載の通り、以降二度と参照できないです。

### CLIでログインする

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

発行したトークンを入力:
```

トークンを入力し、エンターでsubmitします。

```bash
発行したトークンを入力: 1234567890abcdefg1234567890abcdefg123456
Hi suiwave!

ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！

🚀 コンテンツをブラウザでプレビューする
  npx qiita preview

🚀 新しい記事を追加する
  npx qiita new (記事のファイルのベース名)

🚀 記事を投稿、更新する
  npx qiita publish (記事のファイルのベース名)

💁 コマンドのヘルプを確認する
  npx qiita help
```

きたーーー。


## qiita pullコマンドで記事をローカルに保存する

やってみます

```bash
$ npx qiita pull
Sync local articles from Qiita
Successful!
```

成功しました！

![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/1ee1bc08-5dd4-0582-5a74-99ed14b0d22a.png)

publicディレクトリが作成され、mdファイルが生成されています。
mdの内容を確認しましょ

![cap5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/cccc7dd6-8df7-c0cf-3fb3-69d64de35b39.png)

記事idがファイル名になってる感じですね。

![cap4_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/162df414-1366-f405-c219-2e91e1e4b1ed.png)

このままでは、ファイル名がちょっとわかりづらいですね。
楽に管理するため、ファイル名を編集してみます。

```public/1ea8becfb41eaf9d3be1.md → public/howto-aws-cert-pass.md```

ファイル名変更後も、記事とmdファイルが紐づいているか確認します。
ファイル名を変更した記事を編集し、再度pullした時、ローカルのmdが更新されるかを確認すればよさそうです。

![cap6_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/532a0ae6-9cd8-65a1-d3d2-35c919932cca.png)

まずは記事を更新。

では、pullしていきます。

```
$ npx qiita pull
Sync local articles from Qiita
Successful!
```

pullが成功しました。

![cap6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/3f79bd8a-79fd-d650-ba3b-3e05a1eecd63.png)

```updated_at``` が更新されてますね。

![cap7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/d0b8cbd7-fba2-8d51-b918-a11873c1f6a5.png)

更新も反映されています！
ということは、ファイル名は自分の分かりやすいものにしても平気そうですね。

## 画像を保存する

![cap9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/4ead58ec-b442-7003-49e4-eafcd6a7d398.png)

画像などは別途 ```grep -n "qiita-image-store" public/*``` などでパスを取得して保存すればよさそうです。

# おわりに

これで自分の記事をローカルで管理できることが確認できました！！！
ローカルに記事の元ファイルがあったりなかったりだったので、以後はこれで楽に管理できそうで嬉しいです。