この記事はQiita Advent Calendar 2021の 4 日目の記事です！
Qiita株式会社 CX 向上グループの花田（@ohakutsu）が担当します！
はじめに
先日、知人との会話でこのような話題があがりました。
知人「Qiita Team って Headless CMS になれるんじゃね？」
Qiita Team は Headless CMS サービスではないものの、API が存在するのもあって拡張性は高いです。既存の機能だけを使って Qiita Team で個人ブログを作れないかを考えてみました。
案
Qiita Team には API があって、Qiita Team 内の記事を取得できます。また、Webhook も用意されています。
今回はこれらを用いて、
- Qiita Team にブログ用の記事を投稿する
- Qiita API でブログ用の記事を取得
- Qiita Team Webhook で記事投稿・編集時にデプロイ
を考えてみます。
Qiita Team とは？
Qiita Team は Qiita 株式会社が運営している社内向けの情報共有サービスです。
Qiita Team はマークダウンで記事を書くことができるだけでなく、グループごとに記事を分けたり、テンプレート機能などがあります。
（30 日間の無料トライアルがあるので、ぜひお試しください！）
事前準備
自身の Qiita Team のチームを用意しておく必要があります。
Qiita アカウントがあれば簡単につくることができます。
https://teams.qiita.com/ の「無料トライアル」から作成できます。
Qiita Team に記事を用意する
グループ機能を使うことで、個人ブログ用の記事を他の記事と分けることができます。
今回は、「Blog 用グループ」を用意して記事を紐付けていきます。
次に、Qiita Team に個人ブログ用の記事を用意します。
今回は、以下のような記事を用意してみました。
右下のグループ選択から「Blog 用グループ」を選択し、投稿します。
このままでは画像などのリソースに外部からアクセスができないので、記事をウェブに公開します。
設定 > チーム設定 からウェブに公開できるよう権限を設定します。
そして、記事に戻って右上からウェブに公開をします。
これで記事の用意は終わりです。
Qiita API で記事を取得する
API を使って先程投稿した記事を取得します。
詳しいドキュメントは以下をご覧ください。
Qiita Team で個人用アクセストークンを取得します。
設定 > 〇〇向けアプリケーション > 〇〇向け個人用アクセストークン からトークンを取得します。
トークンはコピーしておいてください
取得したトークンを使って、以下のようなcurlコマンドで記事一覧を取得できることを確認しておきます。
curl "https://YOUR_TEAM.qiita.com/api/v2/items?query=group:blog" -H "Authorization: Bearer YOUR_TOKEN"
また、Qiita API v2 ドキュメント - Qiita:Developerにもあるように、任意のクエリをつけることができます。
例）blogグループの記事を、10 記事ごとにページネーションをし、1 ページ目をとってくる
https://ohakutsu.qiita.com/api/v2/items?page=1&per=10&query=group:blog
以下のように記事データを取得できます。
取得した記事を元にブログを用意する
あとは、上記で取得した記事データを使って Gatsby などでブログを作成すれば完成です！
記事投稿・編集時のデプロイを自動でやりたい
Qiita Team Webhook を使って記事投稿・編集時にデプロイまで行えるようにします。
まずは、Webhook 用の URL を取得しておきます。
Vercel, Amplify などお好きな環境で用意しましょう。
次に Qiita Team 側に Webhook の設定をします。
Qiita Team の、
設定 > チーム設定 サービス連携 > 追加 から任意の Webhook を追加できます。
発火させたいイベント、対象のグループを選択します。
これでテストをしてみてデプロイが走れば完了です。
結論
- 個人ブログとして公開できる！
- デプロイも自動化できる！
- Qiita Team のマークダウン記法が使える！
Qiita Advent Calendar 2021 の 5 日目は、
Qiita株式会社 Qiita プロダクトマネージャーの清野（@getty104）が担当します！
楽しみですね！
ぜひ Qiita Advent Calendar 2021 を購読設定して、明日の記事もご覧いただけると嬉しいです。