Qiita&Zennの同時投稿に対応できるリポジトリを作ってみた（シリーズ記事も対応）

Blog-Project は、Qiita と Zenn に対応し、効率的に記事を管理・公開するために設計されたシステムです。本プロジェクトは、3 つのリポジトリで構成されており、それぞれが独自の役割を果たしながら連携します。この記事では、このシステムの構造と特徴、そしてセットアップ方法について詳しく解説します。

この記事が Blog-Project の全貌を理解し、導入する際の一助となれば幸いです。興味を持たれた方はぜひ

をご覧ください！

プロジェクトの背景

Qiita や Zenn は、それぞれ独自の魅力や強みを持つ素晴らしいブログプラットフォームです。Qiita はエンジニア向けの知識共有がしやすく、Zenn は洗練されたデザインや技術記事の公開が簡単に行える点が魅力的です。しかし、どちらも素晴らしいだけに、両方で記事を書きたいと思ったとき、同じ記事をそれぞれのプラットフォームで管理するのが少し手間だと感じることがありました。

特にシリーズ記事を書くときに、記事の冒頭に他の記事へのリンクを手動で追加するのは、時間がかかる上にミスが起きやすい作業です。例えば、新しい記事を公開するたびに、過去の全ての記事を更新してリンクを挿入しなければならず、この作業がどんどん煩雑になってしまうのです。

そこで、「記事を1箇所で管理しながら、Qiita と Zenn の両方に効率よく公開できないだろうか？」と考えたことが、このプロジェクトを作るきっかけになりました。さらに、シリーズ記事のリンクを自動生成して記事に組み込む仕組みがあれば、もっと簡単にシリーズを管理できるのではないかと思い、このシステムを開発するに至りました。

「記事を書く」という本質的な作業に集中できる環境を作るため、このプロジェクトでは、煩雑な管理や作業をできるだけ自動化することを目指しています。

そこで、Blog-Project は、以下の課題を解決するために開発されました：

• 複数プラットフォームへの記事の同時公開
  同じ記事を複数のプラットフォームに公開したい場合、手作業でコピー＆ペーストするのは非効率です。

• シリーズ記事のリンク生成
  シリーズ記事を効率よく管理し、記事内にリンクを自動的に挿入する仕組みが必要でした。

• 自動化の実現
  記事の解析、リンク生成、公開プロセスを自動化し、開発者の手間を削減すること。

リンクディレクトリの例

Blog-Project では、シリーズ記事のリンクを自動生成して記事内に挿入することができます。以下はその例です：

シリーズ記事：ホームサーバー完全構築ガイド

シリーズ記事の冒頭に以下のようなリンクディレクトリが自動的に挿入されます：

<!-- START_SERIES -->

ホームサーバー完全構築ガイド シリーズ記事：

[ホームサーバー完全構築ガイド #0 計画とハードウェア選定](https://www.example.com)  
[ホームサーバー完全構築ガイド #1 OS導入とインフラ設定](https://www.example.com)  
[ホームサーバー完全構築ガイド #2 サービス群の選定](https://www.example.com)  
[ホームサーバー完全構築ガイド #3 WordPressのデプロイ](https://www.example.com)  
[ホームサーバー完全構築ガイド #4 情報収集システムの構築](https://www.example.com)

<!-- END_SERIES -->

このように、シリーズ内の記事が自動的にリンクされ、読者が簡単に他の記事にアクセスできるようになります。新しい記事を追加する際も、リンクディレクトリが自動更新されるため、手動でリンクを挿入する手間が省けます。

プロジェクトの構造

Blog-Project は、以下の 3 つのリポジトリで構成されています：

1. Main Repository: Blog-Project

• 役割:
  すべての記事の管理を行い、Qiita や Zenn への分配を実行します。

• 主な機能:

  • 記事の local_updated_at メタデータを自動更新。
  • 記事を qiita-repo と zenn-repo に分配。
  • 両プラットフォーム共通の記事と、各プラットフォーム専用の記事を効率的に管理。

• ディレクトリ構成:

  .
  ├── articles/
  │   ├── share/       # Qiita & Zenn 共通の記事
  │   ├── qiita/       # Qiita 専用の記事
  │   └── zenn/        # Zenn 専用の記事
  ├── scripts/         # 自動化スクリプト
  └── .github/
      └── workflows/   # GitHub Actions 設定
  

2. Sub Repository: Qiita-Repo

• 役割:
  Qiita 向けの記事を管理し、シリーズリンクを生成・公開。

• 主な機能:

  • Qiita の記事をリモートから取得しローカルに同期。
  • pre-publish ディレクトリに記事を解析・格納。
  • 記事内にシリーズリンクを生成・挿入。
  • 記事を Qiita に公開。

• 特徴的なワークフロー:

  1. Qiita から既存の記事を pull
  2. 記事の更新とシリーズリンクの生成
  3. 更新された記事を再公開
  

3. Sub Repository: Zenn-Repo

• 役割:
  Zenn 向けの記事を管理し、効率的に公開。

• 主な機能:

  • pre-publish ディレクトリに格納された記事を解析。
  • articles/ に記事を移動し、シリーズリンクを生成。
  • 記事をリポジトリにコミットし、Zenn CLI で公開。

• シンプルな公開フロー:

  1. 記事の解析と移動
  2. シリーズリンクの生成
  3. 記事のリポジトリ更新
  

GitHub Actions を活用した自動化

Blog-Project の最大の特徴は、GitHub Actions による完全な自動化です。リポジトリに記事をプッシュするだけで、以下のプロセスが自動で実行されます：

1. 記事の解析と分配
   Main Repository から Qiita-Repo と Zenn-Repo に記事を分配します。

2. シリーズリンクの生成
   各リポジトリでシリーズ記事のリンクを生成し、適切な位置に挿入します。

3. 記事の公開
   Qiita CLI や Zenn CLI を活用して、それぞれのプラットフォームに記事を公開します。

4. 再同期と更新
   公開後、リンクやメタデータを再確認し、必要な修正を自動で適用します。

セットアップ方法

必要なツール

• Node.js
• Git
• GitHub アカウント
• Qiita アクセストークン
• GitHub Actions 用 Personal Access Token

---

ステップ 1: リポジトリのクローン

以下のコマンドで Main Repository をクローンします：

git clone https://github.com/SolitudeRA/Blog-Project.git
cd Blog-Project

---

ステップ 2: 必要な依存関係をインストール

Node.js がインストールされていることを確認し、以下を実行します：

npm install

---

ステップ 3: Qiita & GitHub トークンの設定

1. Qiita アクセストークン
   Qiita アカウントの アクセストークンページ にアクセスし、write_qiita と read_qiita スコープでトークンを生成します。

2. GitHub Personal Access Token
   GitHub アカウントの トークン生成ページ にアクセスし、repo スコープでトークンを生成します。

3. GitHub Secrets に登録
   それぞれのトークンを以下の名前でリポジトリに登録します：

   • Qiita: QIITA_REPO_TOKEN
   • GitHub: BLOG_PROJECT_TOKEN

今後の展望

Blog-Project は、現段階ではテキストベースの記事管理と公開に特化していますが、将来的には挿絵や図表などの画像を含む記事の適切な管理と公開にも対応する予定です。特に、画像ファイルの効率的な管理や、各プラットフォームでの再利用を簡単にする仕組みを整備し、さらに使いやすいシステムを目指しています。このプロジェクトの進化により、より多様な記事作成ニーズに応えられるようになることを目指しています。

ライセンス

本プロジェクトは MITライセンス のもとで公開されています。