はじめに
ZennとGitHubを連携し、Pull Requestを活用しながら一つのZennアカウントを複数人で運用するフローを作成しました。
自己紹介
秋葉原の中高生向けプログラミングスクールでクラスアシスタントを務めている @futaba3dd です。2025年3月に入社予定の企業でFlutterエンジニアとしてインターンをしており、個人でiOSアプリもリリースしています。
背景
AkihabaraSchoolでは、プログラミングスクールに通う中高生にも技術に関する知識を発信して欲しいと考えています。
中高生が執筆した記事をそのまま発信するのではなく、大学生メンターや現役エンジニアが内容を確認してから公開したいという背景から、一つのZennアカウントを複数人で運用する形式を採用しました。
ZennにはPublication機能があるため、一つのZennアカウントを複数人で運用するケースは少ないかと思いますが、この記事が誰かのお役に立てれば幸いです。
運用の準備
まず、アカウントを運用する複数人の中でオーナー権限を持つ人を決めます。
オーナーが準備すること
1. 複数人で運用するZennアカウントとGitHubリポジトリを作成、連携
Zenn公式のGitHubリポジトリでZennのコンテンツを管理するを参考にしてください。
以下の点に注意します。
- 運用に参加するメンバーがGitHubリポジトリに書き込む権利を持てるようにしてください。
- 個人アカウント内で作成したリポジトリであれば、運用に参加するメンバーをcollaboratorsに追加する。
- 運用に参加するメンバーが所属するOrganization内に作成したリポジトリであれば、メンバーにAll-repository write権限を付与する。
- mainブランチへの直接プッシュを禁止にする設定をしてください。
- デプロイ対象ブランチがデフォルトでmainブランチになっているため、特に必要がなければそのままにしGitHub側でmainブランチを保護します。
2. Zenn CLIの環境構築
以下の"運用に参加するメンバーが準備すること"パートで紹介している1~4の内容を行います。
3. Zenn CLIのセットアップ
Zenn CLIを利用した記事の作成に必要なファイルが生成されるコマンドを実行します。
$ npx zenn init
オーナー側の準備は完了です🎉
運用に参加するメンバーが準備すること
1. Node.js(npm)がインストールされているか確認
$ npm -v
インストールされていない場合は、nodeをインストールします。バージョン管理ツールのnvmを使ったインストールがおすすめです。
2. 複数人で運用するZennアカウントに連携されたリポジトリをPCにクローン
$ git clone https://github.com/************.git
3. クローンしたファイルのディレクトリに移動
$ cd /hoge/hogehoge/************
4. Zenn CLIをインストール
$ npm init --yes
$ npm install zenn-cli
下記のコマンドでZenn CLIをアップデートすることができます。
$ npm install zenn-cli@latest
運用に参加するメンバー側の準備は完了です🎉
オーナーは、Zenn CLIのセットアップ手順に進みます。
Zenn CLIとGitHubによる記事作成の運用フロー
1. クローンしたリポジトリのファイルを開く
お好みのエディターでファイルを開きます。
2. 記事用のブランチを切る
ターミナルを起動し、ファイルのディレクトリに移動して記事用のブランチを切ります。
$ git checkout -b name/first-article
3. 記事を新規作成
$ npx zenn new:article --published true --slug 記事のスラッグ
npx zenn new:articleのみで記事の新規作成が可能ですが、ここでは記事のFront Matterを指定します。
-
--published trueで記事作成時から公開設定をtrueにしておくことで、mainブランチにマージされた際自動デプロイされるようになります。 - スラッグがファイル名になるため、
--slug 記事のスラッグで記事のslugを指定します。
slug（スラッグ）とは・注意点
slug（スラッグ）は、記事や本のユニークなIDのような文字列です。例えばslugが
example-articleの記事のURLはhttps://zenn.dev/ユーザー名/articles/example-articleとなります。
- slugはサイト全体で（記事や本などのコンテンツの種類ごとに）ユニークにする必要があります。他ユーザーの記事で使用済みのslugも使用できないのでご注意ください。
- slugは半角英小文字（
a-z）、半角数字（0-9）、ハイフン（``）、アンダースコア（_）の12〜50字の組み合わせにする必要があります。- slugは一度zenn.dev上で作成されたら変更できません（slugを変えると別の投稿として作成されます）。
また、--publication-name hogehogeというようにpublication-nameを設定すると、公開時に指定したpublicationへ投稿されます。
このように作成できていればOKです🎉
4. 記事本文を作成
タイトル、絵文字、topicsを指定し、本文を作成します。
随時コミットとプッシュを行います。
5. 記事をプレビュー
$ npx zenn preview
プレビューを終了するには、ターミナルでcontrol/Ctrl + Cを押します。
6. 記事のPull Requestを作成
記事のPRを作成します。
Reviewersを指定し、Assigneesはassign yourselfを押します。
本文は必要に応じて記入します。
7. 記事のPull Request承認とデプロイ
PRが承認されると記事がmainブランチにマージされ、自動デプロイされます。
GitHub連携設定のデプロイ対象ブランチがmainになっていない場合、また記事ファイルのpublishedがfalseになっている場合もデプロイされないので注意してください。
おわりに
ZennとGitHubを連携し、Pull Requestを活用しながら一つのZennアカウントを複数人で運用するフローの紹介をしました。Zenn公式記事や、他のZennユーザーが執筆したGitHub連携の記事も参考にしながら、目的に応じて活用してみてください。
最後までお読みいただき、ありがとうございました。
参考リンク
Discussion