Zenn
📃

記事投稿を楽に管理したいんじゃ！

に公開
Zenn
Qiita
Tech blog
idea

やりたいこと

Qiita と Zenn に記事を投稿しているが、管理が別々になって大変なので共通して管理できるようします。

方針

  • ベースは Zenn
    • リポジトリを Zenn と連携させる必要があり、ディレクトリ構成も仕様に合わせる必要があるため
  • Zenn 用に作成した記事を Qiita 用の記事に変換する
    • 作成するのは Zenn 用の記事のみ
    • Markdown の先頭に記事のメタデータを設定する箇所がそれぞれにあるが、差があるのでスクリプトで変換する
  • Qiita への投稿は GitHub Actions 上で行う

ディレクトリ構成

以下のようなディレクトリ構成。
Zenn の構成に基づいて、Qiita 用のディレクトリを作成している。

├── README.md
├── articles
├── books
├── create_qiita_article.sh
└── qiita

Prerequisites

  • Node.js
    • 18.0.0 以上 (Zenn CLI では14以上ですが、Qiita CLI では18以上が必要)

Zenn CLI

以下のページを参考にインストールする。

https://zenn.dev/zenn/articles/install-zenn-cli

Zenn CLI の場合は、記事投稿を行うために GitHub のリポジトリと事前に連携させておく必要がある。上記のリンクを参考に行う。

インストール後、以下コマンドでリポジトリの初期化を行う。articles や books のディレクトリが作成される。

npx zenn init

Qiita CLI

以下作業は qiita ディレクトリで行う。 以下のページを参考にインストールする。

https://qiita.com/Qiita/items/666e190490d0af90a92b

qiita ディレクトリでインストール完了後、以下コマンドで初期化を行う。

cd qiita # qiita ディレクトリで行う
npx qiita init

Qiita CLI の場合は、記事投稿を行うために Qiita のアクセストークンを事前に取得しておく必要がある。上記のリンクを参考に行う。

Qiita の記事は GitHub Actions を使用して行う。そのため、発行したアクセストークンは GitHub Secrets に登録しておく。GitHub のシークレット設定から QIITA_TOKEN という名前で発行したトークンを登録しておく。.github/workflows/publish.yml で Qiita への投稿が行われる。

記事の作成

Zenn CLI を使用して記事を作成する。以下のコマンドで記事を作成する。

npx zenn new:article

以下の項目は必須。

  • title
  • type
    • tech または idea
  • topics
    • 1つ以上指定する
  • published
    • true または false
    • true の場合は公開状態で投稿される
    • false の場合は下書き状態で投稿される
  • 記事の本文

[!NOTE]
記事の削除については、Zenn・Qiita ともに CLI では対応していないので、Web 上で行う必要がある。

Qiita 用に記事を変換

Zenn 用の記事に設定されている Front Matter を Qiita 用に変換するために以下のようなスクリプトを作成した。
(必要に応じて変更してください)

#!/bin/bash

INPUT_FILE="$1"
FILE_NAME=$(basename $INPUT_FILE)
QIITA_ARTICLE_DIR="qiita/public"
QIITA_FILE_PATH="$QIITA_ARTICLE_DIR/$FILE_NAME"

# convert to Qiita article format
awk '
  BEGIN { in_block=0 }
  /^---/ {
    in_block++
    if (in_block==2) exit
    next
  }
  in_block==1 { print }
' "$INPUT_FILE" | \
yq eval '
    .tags=.topics |
    .private=( .published | not ) |
    del(.emoji, .type, .topics, .published) |
    .updated_at= "" |
    .id= "" |
    .organization_url_name= null |
    .slide= false |
    .ignorePublish= false
' - | awk 'BEGIN {print "---"} {print} END {print "---"}' > $QIITA_FILE_PATH
    
sed -n '8,$p' "$INPUT_FILE" >> $QIITA_FILE_PATH

記事の公開

Zenn は対象のリポジトリと連携しているので、リポジトリに PUSH すると記事が公開される。

Qiita は GitHub Actions 上で行う。公式で workflow を用意してくれているので、それを使う。

その他、ワークフロー全体の処理はお好みで。

ということで

今回は、Zenn と Qiita の記事投稿を楽に管理する方法について紹介しました。今までは Qiita がメインだったのですが会社として Zenn が推しているようなので、そちらでも書いていこうかと思ったときに管理が面倒だったので、1つの記事を2つのサービスに投稿できるようにしました。

Organization 向けにはレビュープロセスがある企業も多い思うので、そのあたりも改善していきたいところです。

以上です！

Discussion