こんなかんじで
記事をローカルでmdファイル管理したいです。
Qiita CLIを使って実現してみます。
Qiita CLIとは？
Qiitaが提供しているNode製のqiita記事管理ライブラリです。
ライブラリを使用することで、ローカル環境での記事執筆などが行えます。
ローカルでの記事の管理やgithubとの連携などは以下の記事に全部載っているので、CLIで記事の投稿などを行いたい方はぜひ参考にしてください。
今回はこのツールのpull コマンドを使用して今まで書いた記事を後からローカル管理できるようにしてみます。
やってみる
プロジェクトの用意
$ mkdir qiita
$ cd qiita/
センスなしのディレクトリを作成します。
qiita cli はnodeで動くので、npm init していきます。
$ 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をプロジェクトに追加します。
$ 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
正常にインストールされたか確認します。
$ npx qiita version
1.6.1
configする
アクセストークンを発行する
https://qiita.com/settings/tokens/new に移動し、CLI用のアクセストークンを発行します。
個人アカウントなので、チーム用の権限は選択しないでおきます。
「トークンを発行」をクリックし、アクセストークンを発行します。
一度しか表示されないらしいのでしっかりメモします。
記載の通り、以降二度と参照できないです。
CLIでログインする
$ npx qiita login
>
以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli
発行したトークンを入力:
トークンを入力し、エンターでsubmitします。
発行したトークンを入力: 1234567890abcdefg1234567890abcdefg123456
Hi suiwave!
ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！
🚀 コンテンツをブラウザでプレビューする
npx qiita preview
🚀 新しい記事を追加する
npx qiita new (記事のファイルのベース名)
🚀 記事を投稿、更新する
npx qiita publish (記事のファイルのベース名)
💁 コマンドのヘルプを確認する
npx qiita help
きたーーー。
qiita pullコマンドで記事をローカルに保存する
やってみます
$ npx qiita pull
Sync local articles from Qiita
Successful!
成功しました！
publicディレクトリが作成され、mdファイルが生成されています。
mdの内容を確認しましょ
記事idがファイル名になってる感じですね。
このままでは、ファイル名がちょっとわかりづらいですね。
楽に管理するため、ファイル名を編集してみます。
public/1ea8becfb41eaf9d3be1.md → public/howto-aws-cert-pass.md
ファイル名変更後も、記事とmdファイルが紐づいているか確認します。
ファイル名を変更した記事を編集し、再度pullした時、ローカルのmdが更新されるかを確認すればよさそうです。
まずは記事を更新。
では、pullしていきます。
$ npx qiita pull
Sync local articles from Qiita
Successful!
pullが成功しました。
updated_at が更新されてますね。
更新も反映されています！
ということは、ファイル名は自分の分かりやすいものにしても平気そうですね。
画像を保存する
画像などは別途 grep -n "qiita-image-store" public/* などでパスを取得して保存すればよさそうです。
おわりに
これで自分の記事をローカルで管理できることが確認できました！！！
ローカルに記事の元ファイルがあったりなかったりだったので、以後はこれで楽に管理できそうで嬉しいです。