💻

Zenn CLIをインストールする

2020/09/06に公開・約1,500字・17件のコメント
Zenn
tech

Zenn CLIとは

ZennとGitHubリポジトリを連携すると、ローカルの好きなエディターで投稿コンテンツの作成・編集ができるようになります。

📘 ZennとGitHubリポジトリを連携する →

ローカルでの執筆時には、スムーズにmarkdownファイルの作成したり、コンテンツをプレビューしたりするために「Zenn CLI」を導入しましょう。

Zenn CLIの導入手順

0. 事前準備

1. CLIをインストールする

Zennのコンテンツを管理したいディレクトリで、以下のコマンドを実行します。

$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入

これでディレクトリにCLIがインストールされます。

2. Zenn用のセットアップを行う

続いて以下のnpxコマンドを実行します。

$ npx zenn init

README.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にmarkdownファイル（◯◯.md）を入れていくことになります。

3. 導入完了🎉

これでZenn CLIの導入は完了です。以下のコマンドを実行することでブラウザでプレビューが開きます。

$ npx zenn preview
# 👀 Preview on http://localhost:8000

別のポート番号を指定する

npx zenn preview --port 3333のようにポート番号を指定することもできます。

ホットリロードをOFFにする

npx zenn preview --no-watchのようにすることでファイルの監視と自動リロードが無効になります。

CLIをアップデートする

Zenn CLIの表示がzenn.devと異なるときやCLI利用時に更新通知が表示されたときは下記のコマンドでアップデートを行ってください。

$ npm install zenn-cli@latest

コンテンツを作成・編集する

具体的な執筆方法は下記のページをご覧ください。

📘 Zenn CLIの使い方 →

GitHubで編集を提案

Discussion

$ npx zenn init

が上手く動作しないようです。（自分のローカルの環境問題かもですが一応..）

以下のように表示されてファイルは作られませんでした。

~/g/g/k/zen-articles ❯❯❯ npx zenn init

npx: 9個のパッケージを1.57秒でインストールしました。
コマンドが見つかりません： zenn

以下は動作してarticlesやbooksのファイルが作られました。

$ npm install -g zenn-cli
$ zenn init

ご報告ありがとうございます。npx zenn initの前にnpm install zenn-cliは実行されていますか？
もちろんグローバルでインストールしていただいてもOKです。

は、、失礼しました。zenn-cliを入れ忘れていたかもです🙏
ありがとうございます

プレビュー機能が動きません。以下のように例外を吐いて落っこちます。

$ npx zenn preview
(node:126485) UnhandledPromiseRejectionWarning: Error: Could not find a valid build in the '/home/username/workspace/zenn-docs/.next' directory! Try building your app with 'next build' before starting the server.
    at Server.readBuildId (/home/username/workspace/zenn-docs/node_modules/next/dist/next-server/server/next-server.js:113:355)
    at new Server (/home/username/workspace/zenn-docs/node_modules/next/dist/next-server/server/next-server.js:3:120)
    at Object.createServer [as default] (/home/username/workspace/zenn-docs/node_modules/next/dist/server/next.js:2:638)
    at /home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:53:41
    at step (/home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:33:23)
    at Object.next (/home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:14:53)
    at /home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:4:12)
    at Object.exports.build (/home/username/workspace/zenn-docs/node_modules/zenn-cli/dist/cli/preview/build.js:48:12)

ちなみに Ubuntu 環境で node.js のバージョンは v14.11.0 (npm 6.14.8) です。
zenn-cli のバージョンは 0.1.23 です。

そういえば zenn-cli インストールの際に

$ npm install zenn-cli
...
+ zenn-cli@0.1.23
added 900 packages from 393 contributors and audited 903 packages in 66.098s

40 packages are looking for funding
  run `npm fund` for details

found 5 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

と不穏なメッセージが出たのですが，問題ないのでしょうか。

こちら修正済みです。

https://github.com/zenn-dev/zenn-roadmap/issues/37

お手数ですがnpm install zenn-cli@latestで最新版へのアップデートをお願いします。

なおセキュリティの警告についてはまったく問題ありません。
（ただあまり精神的に良いものではないのでそのうちなんとかしようと思っています）

zenn-cli@0.1.29 で動作確認できました。対応ありがとうございます。障害報告などは GitHub の Issues に上げたほうがいいでしょうか。

ありがとうございます。できればこちらからIssueを作成していただければと思います。
Zenn Issues

Zenn CLIを入れようとしたら下記のようになってしまってインストールできないのですが、どうすればいいですか？
OS：windows10Home 20H2
Git version：2.30.0.windows.1
Node js version：14.15.4
です。

PS C:\Zenn> npm install zenn-cli
npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\next\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/catnose99/markdown-it-custom-block.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dai12\AppData\Roaming\npm-cache\_logs\2021-01-12T02_54_45_410Z-debug.log

原因はGitHubでホスティングしている一部のパッケージを参照できていないことだと考えられます。

おそらくこちらのissueと同じ現象で、Git for Windowsを入れることでzenn-cliがインストールできるようになると思います。

とはいえパッケージのGitからの参照をやめればこの問題は発生しないので、近日中に対応しようと思います。

返信ありがとうございます。
試してみます！

こちら対応しました。まだ問題が解消されていない場合、npm install zenn-cli@latestを実行していただければ幸いです。

プレビュー時にポートを変更しても「Preview on http://localhost:80」と表示されます。
実際は指定したポートで閲覧できるので表示だけがおかしいようです。
OS:win10Education1909
Node:v14.15.1
VSCodeでの表示のバグでした。失礼しました。

ご報告ありがとうございました。

2021 年 2 月 20 日現在、Node v15.2.1 で正常に Zenn CLI をインストールすることができました。

$ node -v
v15.2.1

$ npm install zenn-cli -g
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"

added 916 packages, and audited 916 packages in 25s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npx zenn init

  🎉Done!
  早速コンテンツを作成しましょう

  👇新しい記事を作成する
  $ zenn new:article

  👇新しい本を作成する
  $ zenn new:book

  👇表示をプレビューする
  $ zenn preview

すべての環境・マイナーバージョンで試していないのでなんとも言えませんが、Node v15 でインストールできない問題に関する注意書きはもしかすると不要かもしれません。

ご報告ありがとうございます。修正します。

Zenn CLIの導入手順の事前準備の「Node.jsをはじめて使う場合はインストールする必要があります」の箇所などに、Node.jsのバージョンに関する条件(現在は14.0.0以上)の明記があるとありがたいです。

Zenn CLIを使おうとしていて、Node.jsに馴染みがない場合には、古いバージョン(v12など)のNode.jsではZenn CLIが動作しないことが簡単にわかると手間がかからずよいと思います。

ログインするとコメントできます