Zenn CLIをインストールする

公開:2020/09/06
更新:2020/09/24
2 min読了の目安(約1500字TECH技術記事

Zenn CLIとは

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

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

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

Zenn CLIのソースコードはGitHubに公開されています

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のほか、articlesbooksという名前のディレクトリが作成されます。この中にマークダウンファイル(◯◯.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の使い方 →