Zenn
💻

Zenn CLIをインストールする

2020/09/06に公開
23件
Zenn
idea

Zenn CLIとは

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

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

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

Zenn CLIの導入手順

1. 事前準備

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

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

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

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

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

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

$ npx zenn init

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

これでZenn CLIの導入は完了です🎉

CLIをアップデートする

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

$ npm install zenn-cli@latest

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

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

📘 Zenn CLIの使い方 →

GitHubで編集を提案

Discussion

ryo_kawamataryo_kawamata
$ 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
Zenn公式Zenn公式

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

ryo_kawamataryo_kawamata

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

SpiegelSpiegel

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

$ 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 です。

SpiegelSpiegel

そういえば 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

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

Zenn公式Zenn公式

こちら修正済みです。
https://github.com/zenn-dev/zenn-roadmap/issues/37

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

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

SpiegelSpiegel

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

Spica3939Spica3939

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
Zenn公式Zenn公式

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

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

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

Zenn公式Zenn公式

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

蒟蒻砂漠蒟蒻砂漠

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

Kosuke AokiKosuke Aoki

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 でインストールできない問題に関する注意書きはもしかすると不要かもしれません。

MasakiMasaki

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

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

idevidev

code-server上で動かすことはできますか。
リモートのubuntuサーバー上にcode-serverを立ち上げ、zenn-cliをインストールし、
code-serverの拡張機能としてzenn-editorを導入したところ、
preview でlocalhost refused to connectとなりプレビューが正常に表示されない状態となりました。

Seito NSeito N

以下のコマンドでエディタを開くところまではOKなのですが、その後、次のコマンドが打てない状態になってしまいます。今のところは新しいウィンドウを立ち上げて対処していますが、実際はどのようにすると良いでしょうか。

PS C:\Users\user\Documents\Article> npx zenn preview
👀 Preview: http://localhost:8000
Zenn公式Zenn公式

previewを一度終了するか、新しいウィンドウで実行するのが、想定している使い方です。

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