オフラインでQiita記事作成：Qiita CLIを使ってGithubリポジトリで管理してみる

## はじめに
時々カフェで記事を書くことがあるのですがWifiの調子が悪く書きにくくなってしまうことがあるので、オフラインで書ければWifiの調子を気にせずかけるのでそんなものがあればなぁと思ってたら

https://qiita.com/Qiita/items/32c79014509987541130

ありました
なのでやってみようと思います

## Githubリポジトリの作成
こちらでは設定に制限が無いので好き放題設定しちゃいましょう
リポジトリの作成方法はコチラ

https://docs.github.com/ja/repositories/creating-and-managing-repositories/quickstart-for-repositories#create-a-repository

作成したリポジトリはあらかじめcloneしておきましょう

```bash
git clone {リポジトリのURL}
```

## QiitaトークンをGithubActionsに登録

### Qiitaトークンの取得
こちらからアクセストークンの発行ができます

https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli

アクセストークンは何でもよいのですが、スコープは`read_qiita`、`write_qiita`に設定しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/47665369-2b2a-2000-f9f6-857488f874a4.png)

アクセストークンを発行したら`個人用アクセストークン`の文字列をコピーするかどこかに保存しましょう
（自分はローカルのメモアプリに保存しました）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/e7314b31-a30b-f340-0a30-2d30ba6d85a8.png)
（画像は「はじめに」で取り上げたURLから引用）

### GithubActionsに登録
作成したリポジトリ画面から`Settings`を開き、` Secrets and variables`から`Actions`を選択しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/8e88b408-ba3c-f96f-354f-ccfa8507b34e.png)

↑のような画面になるので`New repository secret`をクリックします
（自分は登録しちゃってるのでトークンが表示されていますが、初めて登録する際はここが空っぽになってます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/d4f43950-7fb6-6bea-339c-5725ba8f5714.png)

この画面で名前とQiitaトークンを登録しましょう
`Name`はQIITA_TOKEN と入力し、`Secret`にトークンの文字列を貼り付けてください

## Qiita CLIのセットアップ
ここからQiita CLIのセットアップをしていきます
実はこれも必要だったりするんです

こちらにてセットアップ方法が記載されていますが、本記事でも手順を載せたいと思います

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

### 事前準備
ローカルPCに`Node.js 18.12.0`異常がインストールされていることが前提です
インストールされていなければ入れちゃいましょう

https://nodejs.org/en/download/package-manager

### QiitaCLIをインストールする
お手持ちのターミナルを開き（当方はWSL搭載のUbuntuを使用）、
先ほどcloneしたリポジトリのディレクトリに移動し下記コマンドを実行します

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

以下コマンドでバージョンが表示されていればインストール完了です

```bash
npx qiita version
```

（アップデートする方法もありますが割愛します）


### QiitaCLIをセットアップする
まずはinitコマンドを実行しましょう

```bash
npx qiita init
```
実行すると下記ファイルが作成されます

- .gitignore
- .github/workflows/publish.yml（Github Actionsのワークフローファイル）
- qiita.config.json（ユーザー設定ファイル）


### QiitaCLIのログイン
以下のコマンドで発行したトークンを登録します

```bash
npx qiita login
```

入力すると下記の表示されます

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

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

`xxxxxxxxxxxxxxxxxxxxxxxxxxxx`の部分にQiitaトークンを貼り付けると、

```bash
Hi t1k2a!

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

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

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

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

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

  と出力されます

  QiitaCLIのセットアップはこれで完了です！

## QiitaCLIをリポジトリにプッシュする
QiitaCLIを作成したリポジトリにプッシュします
```bash
git remote add origin [リポジトリのURL]
git push -u origin main
```
#### 注意
本記事のタイトルでオフラインと記述しましたが、プッシュする際はWifiやインターネット接続が必要になります

プッシュすると自動でActionsが実行され、Qiitaに記事が投稿OR更新されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/b57ac247-bcdd-bdaa-a4a9-3a3be5399eb6.png)
（コミット文から滲み出る失敗してる感ｗ）
全てにチェックマークがついてたらOKです


これでQiitaの記事をGithubリポジトリで管理できるようになりました！