VISIONARY JAPAN Advent Calendar 2023 17日目の投稿です！！
12月16日の投稿は@m0216iさんの 初心者向け - React Redux 基礎まとめ - でした！
GitHub 管理する方法
この記事も Qiita CLI を使って執筆しました
Qiita の記事を GitHub 管理する方法は以下で Qiita さんが出してくれてますが、自分なりにまとめてみました。
よかったら参考にしてみて下さい。
1. GitHub で Qiita 記事を管理するためのリポジトリを作成する
自分のプロフィールのトップの Repositories タブをクリックして緑の New ボタンをクリックします。
そしてここから新しいリポジトリを作成します。
2. GitHub Actions の Secrets に Qiita トークンを設置する
まずはアクセストークンを発行します。
こちらに遷移してそのまま「発行する」ボタンをクリックしてください。（アクセストークンの説明の変更をしたい場合は任意のものに変更してください）
表示されたアクセストークンは控えておいてください。
再度アクセストークンを確認することはできませんのでご注意ください。
次に GitHub に移動して、Settings タブをクリック、左のメニューの Secrets and variables の Actions を選択し、New repository secret をクリックします。
Name にはQIITA_TOKENを、Secret には先ほど発行したトークンを設定してください。
そして「Add secret」ボタンをクリックしたらトークンの設定は完了です。
3. Qiita CLI の導入
ご自身の PC の Qiita の記事を管理したい任意のディレクトリで以下コマンドを実行してください。
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/にアクセス出来ます。
左のメニューの「新規記事作成」をクリックすると新しく記事を作成する事が出来ます。
クリックすると以下のような画面に遷移します。
コマンドから新規ファイルを作成する場合は、以下コマンドを実行して下さい。
npx qiita new newArticle002 # newArticle002.md ファイルが作成されます
この時点で自動でnewArticle002.mdというファイル名、そして以下のような内容の新規ファイルが作成されています。
---
title: newArticle002
tags:
- ''
private: false
updated_at: ''
id: null
organization_url_name: null
slide: false
ignorePublish: false
---
# new article body
それぞれの説明は以下です。
---
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の箇所に記述していくことで記事を執筆していく事が出来ます。
地味に嬉しいのはホットリロードが有効になっているのでわざわざリロードする手間がない事です！
記事の中で画像を使用したい場合は左のメニューの「画像をアップロードする」からアップロードして下さい
ここにアップロードする場合は制限があるようで、1ヶ月で 100MB まではアップロード出来るようです。
記事の投稿・更新の方法
記事が完成したら記事を公開しましょう！
方法はとても簡単で main ブランチに対して push するだけです。
push するだけで記事の投稿・更新ができます。
main ブランチに push をすると GitHub Action が自動で実行され、Qiita 上との差分があるファイルのみ Qiita に反映されます。
Qiita Preview 上やコマンドからも記事の投稿・更新は可能です
push する以外にも以下コマンドや、Qiita Preview 上の「記事を投稿する」ボタンからも記事の投稿・更新をする事が出来ます。
npx qiita publish 記事のファイルのベース名 # newArticle001.md だった場合は newArticle001
npx qiita publish --all # 全ての記事を反映
npx qiita publish 記事ファイルのベース名 --force # 強制的に記事ファイルの内容を Qiita に反映
記事の削除は Qiita 上からしか削除出来ません
この記事を参考に Qiita CLI を使用してみて下さい！！
参考