💻
QiitaとGitHubを連携して記事を投稿してみた

2025/01/03に公開
Qiitaにも記事を投稿するようになりました。
ブラウザ上で記事を編集＆投稿しているのですが、なにやら GitHub と連携できるみたいです。
なので、記事を GitHub で管理して Qiita に投稿できるようにしていきます。
ちなみにZenn と GitHub の連携もしましたのでご興味ある方がぜひ～！
https://zenn.dev/kuuki/articles/zenn-article-managed-by-github/

 何ができる？Qiita と GitHub リポジトリを連携することで
リポジトリで管理しているコンテンツ（記事や本）を自動で投稿＆更新してくれる
ブラウザから作成した記事を GitHub に持ってこれる

Qiita CLIと組み合わせることで、ローカル環境でコンテンツを作成できる
コンテンツの削除はブラウザからのみ実行できます。 他のコンテンツデプロイ時に合わせて投稿されないよう、GitHub リポジトリからも削除しておきましょう！

 前提
GitHubとQiitaのアカウントがあるものとします

 ゴールQiita と連携した GitHub リポジトリにコミットすると、自動で記事を投稿＆更新する

 やることGitHub リポジトリを作成
Qiita のアクセストークンを発行
2. で発行したトークンを GitHub Actions の Secrets に設定
GitHub リポジトリをクローン
Qiita CLI のインストール
Qiita CLI のセットアップ
6. の内容を GitHub にプッシュ

 GitHub リポジトリを作成
ここから好きな名前のリポジトリを作成します。
Public, Private どちらでもよく、README.md もいりません
自分は、qiita-contentsというPrivate リポジトリを作成しました

 Qiita のアクセストークンを発行
ここから Qiita CLI からアクセスするためのトークンを発行します
説明と read_qiita, write_qiita の権限があればいいので、そのまま「発行する」をクリック
発行出来たら、「アクセストークンをコピー」をクリックしてどこかにメモしておきましょう
発行したトークンは再度表示できないので忘れないよう必ずメモしましょう！

 2. で発行したトークンを GitHub Actions の Secrets に設定
2. で発行したトークンをGitHub Actionsで使えるようにします
1．で作成したGitHub リポジトリの Settings > Secrets and variables > Actionsを開きます
「New repository secret」をクリックして設定していきます
Name：QIITA_TOKEN
Secret：先ほど発行したアクセストークン
を入力し、「Add secret」で追加していきます
無事追加されましたーー

 GitHub リポジトリをクローンここからは GitHub リポジトリ内やローカル環境をととのえていきます。
先ほど作成した GitHub リポジトリをクローンします
git clone https://github.com/<username>/<repositry_name>.git

// 自分の場合
git clone https://github.com/hisuihisui/qiita-contents.git

 Qiita CLI のインストール
こちらを参考にQiita CLI のインストール＆セットアップをしていきます
Qiita CLI はNode.js 18.12.0 以上が必要なので、バージョンを確認しておきます
$ node -v
v18.17.1
// 18.17.1なのでOK
Node.js のインストール方法は ↓ をご覧ください
https://zenn.dev/kuuki/articles/windows-nodejs-install/
https://zenn.dev/kuuki/articles/ubuntu-install-lts-nodejs/
先ほどクローンしたリポジトリ配下に移動して Qiita CLI をインストールします
// リポジトリ配下に移動
$ cd qiita-contents/

// Qiita CLIをこのディレクトリにインストール
qiita-contents$ npm install @qiita/qiita-cli --save-dev

added 128 packages, and audited 129 packages in 7s

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

found 0 vulnerabilities

// バージョンが表示されればOK
qiita-contents$ npx qiita version
1.4.2

// ちなみにアップデートのコマンド
$ npm install @qiita/qiita-cli@latest

 Qiita CLI のセットアップ
init コマンドでセットアップをします
qiita-contents$ npx qiita init
設定ファイルを生成します。

  Creating /mnt/c/Users/****/Desktop/development/blog/qiita-contents/.github/workflows/publish.yml
     Created!

  Creating /mnt/c/Users/****/Desktop/development/blog/qiita-contents/.gitignore
     Created!

  Creating /mnt/c/Users/****/Desktop/development/blog/qiita-contents/qiita.config.json
     Created!

Success! ✨

次のステップ:

  1. トークンを作成してログインをしてください。
    npx qiita login

  2. 記事のプレビューができるようになります。
    npx qiita preview

// GitHubActionsのワークフローや.gitignore,qiitaの設定ファイルが生成されている
qiita-contents$ tree -a -I .git
.
├── .github
│   └── workflows
│       └── publish.yml
├── .gitignore
└── qiita.config.json

2 directories, 3 files

GitHub Actions のワークフローを見てみます

main or master ブランチにプッシュしたとき、もしくは手動で実行できる。
ワークフロー実行中に他のコミットによってジョブが中断されない。

Secrets からアクセストークンを読み取り、これを実行する
# Please set 'QIITA_TOKEN' secret to your repository
name: Publish articles

on:
  push:
    branches:
      - main
      - master
  workflow_dispatch:

permissions:
  contents: write

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: false

jobs:
  publish_articles:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: increments/qiita-cli/actions/publish@v1
        with:
          qiita-token: ${{ secrets.QIITA_TOKEN }}
          root: "."


 6. の内容を GitHub にプッシュ
ここまでの作業を GitHub にプッシュしておきます
qiita-contents$ git add .
qiita-contents$ git commit -m "qiita cli setup"
[main (root-commit) d9bb015] qiita cli setup
 3 files changed, 36 insertions(+)
 create mode 100644 .github/workflows/publish.yml
 create mode 100644 .gitignore
 create mode 100644 qiita.config.json
qiita-contents$ git push
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 16 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (7/7), 805 bytes | 38.00 KiB/s, done.
Total 7 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/hisuihisui/qiita-contents.git
 * [new branch]      main -> main
main ブランチに push したのでこれで GitHub Actions がはしります
今回は記事の作成や更新はないのですが、Qiita にある自分の記事がリポジトリに取り込まれます
git pull してみると、ローカルリポジトリに持ってこれます
qiita-contents$ git pull
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 5 (delta 0), reused 5 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), 7.12 KiB | 132.00 KiB/s, done.
From https://github.com/hisuihisui/qiita-contents
   d9bb015..8455c2b  main       -> origin/main
Updating d9bb015..8455c2b
Fast-forward
 public/658e9114fe7d010b395c.md | 228 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 public/7b3706c53c71877c114f.md |  55 +++++++++++++++++++++++++++++++++++
 2 files changed, 283 insertions(+)
 create mode 100644 public/658e9114fe7d010b395c.md
 create mode 100644 public/7b3706c53c71877c114f.md

勝手に Qiita の GUI で作成した記事や変更を持ってきてくれるのは便利ですね！！

 動作確認
 ローカルで記事を作成まずは、Qiita CLI を使って Morkdown ファイルを作成します
// ファイル作成
qiita-contents$ npx qiita new 20240630_github_to_qiita_first
created: 20240630_github_to_qiita_first.md

// Morkdownの中身
qiita-contents$ cat public/20240630_github_to_qiita_first.md
# new article body
-- で囲まれたブロックにメタ情報を記載し、その下に MarkDown で本文を書いていきます


title
記事のタイトル


tags
記事のタグ。

private
true→ 限定共有記事、false→ 公開記事

updated_at
記事の更新日時。記事を投稿したときに勝手に変わる。

id
記事の ID。記事を投稿した際に自動的に記事の UUID に変わる。

organization_url_name
Organization があるならここで指定する。

slide
true→ スライドモード ON、false→ スライドモード OFF

ignorePublish
true→ 記事を投稿しない、false→ 投稿する

今回、ファイルの中身はこんな感じにしてみました！

# この記事は？
QiitaとGitHubを連携してから初めての記事投稿です。
ブラウザから編集するのもいいんですが、GitHubで管理してエンジニアっぽさをアップしたい！！
皆さんもQiitaとGitHubを連携してみてくださいー！


 記事をプレビューで見てみる記事のプレビューを見てみます。
Qiita CLI でログインしていないと使えないのでご注意ください！
// ログインしないでプレビュー見ようとすると。。。
qiita-contents$ npx qiita preview
[Error: ENOENT: no such file or directory, open '/home/******/.config/qiita-cli/credentials.json'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/home/******/.config/qiita-cli/credentials.json'
}
エラーが発生しました (ENOENT: no such file or directory, open '/home/******/.config/qiita-cli/credentials.json')
  バグの可能性がある場合は、Qiita Discussionsよりご報告いただけると幸いです
  https://github.com/increments/qiita-discussions
こんな感じで認証ではじかれます
// Qiita CLIでログインしておく
qiita-contents$ npx qiita login

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

発行したトークンを入力: ******************
Hi hisui_hisui!

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

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

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

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

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

// プレビュー見る
$ npx qiita preview
Preview: http://127.0.0.1:8888
// 勝手にブラウザが立ち上がりプレビューを見れます

 記事を投稿GitHub に push して記事を投稿します
qiita-contents$ git add .

qiita-contents$ git commit -m "first article from qiita cli"
[main d56d485] first article from qiita cli
 1 file changed, 17 insertions(+)
 create mode 100644 public/20240630_github_to_qiita_first.md

qiita-contents$ git push
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 16 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 750 bytes | 57.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/hisuihisui/qiita-contents.git
   8455c2b..d56d485  main -> main
GitHubActions がはしり記事が投稿されました
Qiitaの方を見て、記事が投稿されていれば OK です！！

 記事を更新記事を更新するには、markdown ファイルを編集して GitHub に push すれば OKです！
// ファイル編集後このコマンドを実行
$ git add .
$ git commit -m "edit first article"
$ git push
Qiitaにて記事を見ると更新されています！
これで Qiita と GitHub の連携や一通りの操作はできました！

 参考https://qiita.com/Qiita/items/32c79014509987541130
https://github.com/increments/qiita-cli
title	記事のタイトル
tags	記事のタグ。
private	true→ 限定共有記事、false→ 公開記事
updated_at	記事の更新日時。記事を投稿したときに勝手に変わる。
id	記事の ID。記事を投稿した際に自動的に記事の UUID に変わる。
organization_url_name	Organization があるならここで指定する。
slide	true→ スライドモード ON、false→ スライドモード OFF
ignorePublish	true→ 記事を投稿しない、false→ 投稿する