ZennCLIの導入と使い方

概要

Zennの記事/本の編集・管理をCLI上で行えるnode.jsライブラリ。

導入方法

手順について

1. GithubにZenn連携用リポジトリを作成する
2. GitHub連携から上記で作成したリポジトリとZennアカウントを連携する *1 *2
3. Github連携後、Zenn設定タブから参照するブランチ名を指定する
4. ZennCLI環境を構築（後述）

1. public、privateどちらにも対応
2. 連携できるリポジトリ数は最大2つまで

環境構築

.
├── README.md
├── articles
│   ├── slug.md         // 記事
│   └── ...
├── books
│   └── slug
│      ├── config.yaml  // book設定
│      ├── cover.ong    // bookカバー
│      ├── slug1.md     // チャプター
│      ├── slug2.md
│      └── ...
├── docker
│   └── dockerfile
└── docker-compose.yml

# dockerfile
FROM node:latest

RUN \
    # 作業用ディレクトリを作成
    mkdir /home/zenn \
    && cd /home/zenn

WORKDIR /home/zenn

# docker-compose.yml
version: "3.8"

services:
  node:
    build:
      context: ./docker
      dockerfile: ./dockerfile
    tty: true
    ports:
      - "4444:8000"
    volumes:
      - .:/home/zenn:cached

# dockerコンテナ起動
$ docker compose up -d --build
# npm初期化
$ docker compose run --rm node npm init -y
# ZennCLI インストール
$ docker compose run --rm node npm install zenn-cli@latest
# ZennCLI プレビュー
$ docker compose run --rm node npx zenn preview

記事の作成

# articles配下に新規記事を作成 *1
$ npx zenn new:article
# 新規記事のslug、title、type、絵文字を指定可
$ npx zenn new:article \
    && --slug "slug名" \
    && --title "タイトル" \
    && --type "tech: 技術記事 / idea: アイデア" \
    && --emoji "絵文字（一文字）"

• slugとはzenn記事に付与されるユニークID
  • Github上で管理を行っている場合任意のslugを指定可能
  • 任意で付与する場合、ユニークな値を指定する必要がある
  • 命名は以下の組み合わせのみ受け付ける
    • 半角英小文字（a-z）
    • 半角数字（0-9）
    • ハイフン（-）
    • アンダースコア（_）の12〜50字

1. articles/ランダムなslug.mdという命名規則で作成される

生成されるタグは以下の意味合いを持つ。

---
# タイトル
title: ""
# 絵文字（1文字）
emoji: ""
# 記事タイプ（tech: 技術記事 / idea: アイデア）
type: ""
# タグを配列指定
topics: ['...', '...']
# 公開/非公開
published: false
# 公開日付 (未来時間指定時に投稿予約状態となる)
published_at: yyyy-mm-dd hh:ss
---

本の作成

└── books
   └── slug
      ├── config.yaml  // book設定
      ├── cover.png    // bookカバー
      ├── slug1.md     // チャプター *1
      ├── slug2.md
      └── ...

# book配下に本の雛形を作成
$ npx zenn new:book
$ npx zenn new:book --slug slug名

config.ymlは以下の構成となっている。

# タイトル
title: ""
# 紹介文
summary: ""
# タグを配列指定（5つまで）
topics: ["...", "..."] 
# 公開/非公開
published: true|false
# 値段 *2
price: 0
# チャプターと並び順を指定
chapters:
  - example1 # チャプター1
  - example2 # チャプター2
# 目次の表示設定（h1 ~ 3まで）
toc_depth: 0

1. 最大チャプター数は100個
2. 有料の場合200〜5000円で、100円単位で指定

記事/本のプレビュー

# プレビュー *1
$ npx zenn preview
# ポート指定
$ npx zenn preview --port ポート番号
# ファイルのリアルタイム監視とオートリロードを無効化
$ npx zenn preview --no-watch

1. デフォルトポート番号は8000

記事/本の削除

記事/本の削除はCLI上から不可で、ダッシュボードから行う。

プレビュー

参考

ZennとGithubを連携する方法
Zenn CLIで記事・本を管理する方法
Zenn CLIをインストールする
Zennのスラッグ（slug）とは