Zenn
😉

Zenn CLIを導入(滞りなく)！

2023/06/16に公開
Zenn CLI
tech

はじめに


Zennで3つ記事書いたところで、やっぱり執筆画面とプレビュー画面を切り替えながら書くのしんどいなあと思い、Zenn CLIを導入しました。導入自体は滞りなく終わりました。

動作環境

macOS Monterey 12.6.5

前提条件

  • Node.js（Zenn CLIを使うにはNode.js 14以上が必要）
  • ZennとGitHubリポジトリとの連携

CLIをインストールする

  • Node.jsのバージョンを確認
$ node --version
v14.8.0

OK!

  • Zennのコンテンツを管理したいディレクトリに移動して、以下のコマンドを実行
$ cd workspace/zenn/
$ ls
$ npm init --yes
Wrote to /Users/abc/workspace/zenn/package.json:

{
  "name": "zenn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ tree
.
└── package.json

1 directory, 1 file
bash-3.2$ cat package.json 
{
  "name": "zenn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • インストール
$ npm install zenn-cli
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN zenn@1.0.0 No description
npm WARN zenn@1.0.0 No repository field.

+ zenn-cli@0.1.144
added 1 package and audited 1 package in 1.044s
found 0 vulnerabilities

$ npx zenn init

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

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

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

  👇  投稿をプレビューする
  $ zenn preview

$ tree
.
├── README.md
├── articles
├── books
├── node_modules
│   └── zenn-cli
│       ├── LICENSE
│       ├── README.md
│       ├── dist
│       │   ├── client
│       │   │   ├── assets
│       │   │   │   ├── index-24296a7f.js
│       │   │   │   ├── index-3d972f8b.js
│       │   │   │   └── index-50cfb215.css
│       │   │   ├── favicon.png
│       │   │   ├── index.html
│       │   │   ├── logo.svg
│       │   │   └── static-images
│       │   │       ├── book-cover.png
│       │   │       ├── folder-close.svg
│       │   │       └── folder-open.svg
│       │   └── server
│       │       ├── zenn.js
│       │       └── zenn.js.LICENSE.txt
│       └── package.json
├── package-lock.json
└── package.json

記事を作成&プレビュー

  • 以下のコマンドで記事(.mdファイル)を作成
$ npx zenn new:article
created: articles/cb2d4806001ff3.md
$ npx zenn preview
👀 Preview: http://localhost:8000
  • ブラウザでhttp://localhost:8000にアクセス

    いいですね〜。
    あとは、好きなエディタでcb2d4806001ff3.mdを編集して、ブラウザでプレビューしながら書けます！
    と、思ったのですが、VS Codeとかであればプレビュー出せるしわざわざブラウザ更新プレビューしながら書かなくてもよいのでは。。。

slug（スラッグ）の文字列を指定

以下の参考した記事のURLを貼り付けた時にURLのランダム文字列(slug)って指定できるの？と思ったのですが、「コンテンツのGitHubリポジトリ管理を行っている場合は、slugを任意に指定できる」とのこと。
以下のように指定できるようです。

npx zenn new:article --slug tsuketaislug-name

でもこれ、Zenn全体で一意でないとダメですよね。考えるのめんどくさいな…。

※2023/6/22修正
これ、以下のようにアカウント名/articles/の下にくるからZenn全体でユニークでなくてもいいのですね。すみません、勘違いでした！
https://zenn.dev/araji/articles/[任意に指定したslug]

まとめ

Zenn CLIを導入しました。導入自体は滞りなく終わりました。
今後、↓の方のように執筆しやすい環境を作っていく。
zenn-cli + reviewdog + textlint + GitHub Actions で執筆体験を最高にする
でもなんで、Qiitaみたいに執筆画面とプレビュー画面同時にでない仕様なんだろう。。。

参考

Discussion