Zenn
📝

【GitHub】ZennをGitHubと連携して技術ブログを始める方法

に公開
GitHub
初心者
npm
Zenn
ブログ
tech

ZennとGitHubを連携して技術ブログを始めてみる

技術ブログを始めたいけど、どのプラットフォームを選ぶか迷っていました。今回は、ZennとGitHubを連携できると聞いたので、ChatGPTやClaudeなどで試した内容を、ブログ記事の形で残せるようにしました。実際に設定した内容を記載します。

なぜZennを選んだのか？

技術ブログプラットフォームには以下のような選択肢があります：

  • Qiita: 日本最大級だが、アフィリエイト制限あり
  • note: 幅広い読者層だが、技術記事には不向き
  • はてなブログ: SEOに強いが、有料版が必要
  • Zenn: モダンで収益化可能、GitHub連携が秀逸

Zennを選んだ理由：

  1. GitHubでのMarkdownファイル管理が可能
  2. 有料記事・本の販売で収益化できる
  3. エンジニア読者の質が高い
  4. 現代的なUI/UX

ZennにGitHubを連携させるために必要な準備

1. 必要なアカウント

  • GitHubアカウント（持っていること前提）
  • Zennアカウント

Step 1: Node.jsのインストール

まず、Node.jsをインストールします。ZennのCLIツールを使うために必要です。

Macの場合

# Homebrewを使用（推奨）
brew install node

# または公式サイトからダウンロード
# https://nodejs.org/

インストール確認

node --version
npm --version

Step 2: GitHubリポジトリの作成

  1. GitHubで新しいリポジトリを作成
  2. リポジトリ名：zenn-content（例えば）
  3. Public/Private：どちらでも可

Step 3: Zennアカウントの作成

  1. https://zenn.dev/ にアクセス
  2. 「GitHubでログイン」をクリック
  3. 認証を完了
  4. プロフィールを設定

Step 4: ローカル環境の設定

リポジトリをクローン

git clone https://github.com/yourusername/zenn-content.git
cd zenn-content

Zenn CLIのインストール

npm install -g zenn-cli

プロジェクトの初期化

npx zenn init

このコマンドで以下のディレクトリ構造が自動作成されます：

zenn-content/
├── articles/          # 記事ファイル
├── books/            # 本ファイル
└── README.md         # 説明ファイル

初期ファイルをGitHubにプッシュ

git add .
git commit -m "Initialize Zenn project"
git push origin main

Step 5: ZennダッシュボードでGitHub連携

  1. Zennのダッシュボードにアクセス
  2. 設定 → GitHubリポジトリ連携
  3. 作成したリポジトリ（zenn-content）を選択
  4. 連携を有効化

Step 6: 初めての記事を投稿

記事ファイルの作成

# 新しい記事を作成
npx zenn new:article

記事の形式

作成された記事ファイルは以下の形式になります：

---
title: "記事のタイトル"
emoji: "📝"
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: ["zenn", "github", "初心者"]
published: true # true: 公開 / false: 下書き
---

# 記事の内容

ここに記事の内容を書きます。

記事を公開

git add .
git commit -m "Add new article"
git push origin main

数分後、Zennサイトに自動で公開されます！

実際の運用ワークフロー

1. 記事の作成

# 記事作成
npx zenn new:article

# または手動でファイル作成
touch articles/your-article-slug.md

2. 記事の執筆

  • VSCodeやCursolなどのエディタで執筆
  • .mdファイルを開いたら表示されるエディタでも十分
  • Markdownで記述
  • 画像はimages/フォルダに配置

3. プレビュー確認

npx zenn preview
# http://localhost:8000 でプレビュー

4. 公開

git add .
git commit -m "Add: 記事タイトル"
git push origin main

収益化のコツ

有料記事の作成

---
title: "有料記事のタイトル"
emoji: "💰"
type: "tech"
topics: ["有料", "技術"]
published: true
price: 500 # 価格（円）
---

本の作成

npx zenn new:book

トラブルシューティング

よくあるエラーと解決方法

1. npm権限エラー

sudo npm install -g zenn-cli

2. Git認証エラー

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

3. 記事が反映されない

  • 数分待つ（自動反映に時間がかかる場合あり）
  • Zennダッシュボードでリポジトリ連携を確認

まとめ

ZennとGitHubの連携により、以下のメリットが得られます：

  • 効率的な記事管理: Markdownファイルで管理
  • バージョン管理: Gitで記事の変更履歴を管理
  • 自動公開: GitHubプッシュで自動反映
  • 収益化: 有料記事・本の販売が可能
  • SEO効果: 技術記事に特化したプラットフォーム

技術ブログを始めたい方は、ぜひZennを検討してみてください。
この記事が皆さんの技術ブログ生活の第一歩になれば幸いです！

参考リンク

Discussion