QiitaとGitHubを連携してVSCodeから記事を投稿してみた

はじめに

本記事は、QiitaとGitHubを連携して、VS Codeで記事を作成してQiitaに投稿できるようにした手順のメモです。

目次

• 環境
• 手順
  • 1. Githubにリポジトリを作成する
  • 2. Qiitaのアクセストークンを発行する
  • 3. 発行したアクセストークンをGitHub ActionsのSecretsに設定する
  • 4. GitHubリポジトリをVS Codeでクローンする
  • 5. Qiita CLIをインストールする
  • 6. Qiita CLIをセットアップする
  • 7. Qiita CLIをリポジトリにpushする
  • 8. 記事を作成する
  • 9. 記事をpushする
• 参考文献

環境

• Githubアカウント
• VS Code:1.105.1
• Git:2.50.1
• Node.js:v22.17.1
  • Qiita CLIの実行に必要

手順

1. Githubにリポジトリを作成する

1. Githubにアクセスしてリポジトリを作成する
   • リポジトリはPrivateでもよい

2. Qiitaのアクセストークンを発行する

1. Qiitaにログインする
2. 「設定」 > 「アプリケーション」 > 「個人用アクセストークン」から「新しくトークンを発行する」を開く
3. アクセストークンを発行する
   • アクセストークンの説明：qiita-cli
   • スコープ：read_qiita、write_qiita
4. アクセストークンをコピーしておく（アクセストークンは再表示できない）

3. 発行したアクセストークンをGitHub ActionsのSecretsに設定する

1. Githubにアクセスする
2. 手順1で作成したリポジトリを開く
3. Settings > Secrets and variables > Actionsを開く
4. 「New repository secret」をクリック
5. 以下を設定する
   • Name：QIITA_TOKEN
   • Secret：発行したアクセストークン
6. 設定が完了したら「Add secret」をクリック

4. GitHubリポジトリをVS Codeでクローンする

1. 「ソース管理」ビューを開く
2. コマンドパレットから「Git Clone」を選択
3. リポジトリのURLを入力
4. リポジトリのクローン先を選択

5. Qiita CLIをインストールする

1. クローンしたリポジトリ配下に移動する

2. 以下のコマンドを実行する

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

3. インストール成功したかバージョン表示して確認

   npx qiita version
   

6. Qiita CLIをセットアップする

1. クローンしたリポジトリ配下に移動する

2. 以下のコマンドを実行する

   npx qiita init
   

3. 以下のファイルが作成される

   publish.yml
   .gitignore
   package-lock.json
   package.json
   qiita.config.json
   

7. Qiita CLIをリポジトリにpushする

1. Qiita CLIのセットアップで作成されたファイルを、mainブランチに pushする
2. GitHub Actionsが起動して、投稿済みの記事がリモートリポジトリに反映される
3. mainブランチをpullして、リモートリポジトリをローカルリポジトリに反映する

8. 記事を作成する

1. 以下コマンドを実行する

   npx qiita new
   

2. newArticle001.mdというファイルが作成される

9. 記事をpushする

1. newArticle001.mdを編集する
2. newArticle001.mdをmainブランチにpushする
3. mainブランチにpushすると、GitHub Actionsが起動して、投稿した記事がQiitaに反映される

参考文献

• Qiitaの記事をGitHubリポジトリで管理する方法
• qiita-cli