ZennとGitHubリポジトリを連携すると、ローカルの好きなエディターで投稿コンテンツの作成・編集ができるようになります。
ローカルでの執筆時には、スムーズにmarkdownファイルの作成したり、コンテンツをプレビューしたりするために「Zenn CLI」を導入しましょう。
!Zenn CLIのソースコードはGitHubに公開されています
Zennのコンテンツを管理したいディレクトリで、以下のコマンドを実行します。
$npm init--yes# プロジェクトをデフォルト設定で初期化$npminstall zenn-cli# zenn-cliを導入
これでディレクトリにCLIがインストールされます。
続いて以下のnpx
コマンドを実行します。
$ npx zenn init
README.md
や.gitignore
のほか、articles
とbooks
という名前のディレクトリが作成されます。この中にmarkdownファイル(◯◯.md
)を入れていくことになります。
これでZenn CLIの導入は完了です🎉
Zenn CLIの表示がzenn.devと異なるときやCLI利用時に更新通知が表示されたときは下記のコマンドでアップデートを行ってください。
$npminstall zenn-cli@latest
具体的な執筆方法は下記のページをご覧ください。
$ npx zenn init
が上手く動作しないようです。(自分のローカルの環境問題かもですが一応..)
以下のように表示されてファイルは作られませんでした。
~/g/g/k/zen-articles ❯❯❯ npx zenn initnpx:9個のパッケージを1.57秒でインストールしました。コマンドが見つかりません: zenn
以下は動作してarticlesやbooksのファイルが作られました。
$npminstall-g zenn-cli$ zenn init
プレビュー機能が動きません。以下のように例外を吐いて落っこちます。
$ 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.23added 900 packages from 393 contributors and audited 903 packages in 66.098s40 packages are looking for funding run `npm fund` for detailsfound 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-clinpm 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#deprecatednpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm 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 ENOENTnpm ERR! syscall spawn gitnpm ERR! path gitnpm ERR! errno -4058npm ERR! enoent Error while executing:npm ERR! enoent undefined ls-remote -h -t https://github.com/catnose99/markdown-it-custom-block.gitnpm ERR! enoentnpm ERR! enoentnpm ERR! enoent spawn git ENOENTnpm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm 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
プレビュー時にポートを変更しても「Preview onhttp://localhost:80」と表示されます。
実際は指定したポートで閲覧できるので表示だけがおかしいようです。
OS:win10Education1909
Node:v14.15.1
VSCodeでの表示のバグでした。失礼しました。
2021 年 2 月 20 日現在、Node v15.2.1 で正常に Zenn CLI をインストールすることができました。
$node-vv15.2.1$npminstall zenn-cli-gnpm WARN deprecated fsevents@1.2.13: fsevents1 willbreak onnode v14+ and could be using insecure binaries. Upgrade to fsevents2.npm WARN deprecated chokidar@2.1.8: Chokidar2 willbreak onnode v14+. Upgrade to chokidar3 with 15xless dependencies.npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm WARN deprecated fsevents@2.1.3:"Please update to latest v2.3 or v2.2"added916 packages, and audited916 packagesin 25s50 packages are lookingfor funding run`npm fund`for detailsfound0 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が動作しないことが簡単にわかると手間がかからずよいと思います。
Zennの使い方や開発状況を発信する公式アカウントです。