💻
Zenn CLIをインストールする
Zenn CLIとは
ZennとGitHubリポジトリを連携すると、ローカルの好きなエディターで投稿コンテンツの作成・編集ができるようになります。
ローカルでの執筆時には、スムーズにマークダウンファイルの作成したり、コンテンツをプレビューしたりするために「Zenn CLI」を導入しましょう。
Zenn CLIのソースコードはGitHubに公開されています
Zenn CLIの導入手順
0. 事前準備
- あらかじめZennとGitHubリポジトリとの連携を行っておくことをおすすめします。
- Zenn CLIはNode.js製です。Node.jsをはじめて使う場合はインストールする必要があります。
1. CLIをインストールする
Zennのコンテンツを管理したいディレクトリで、以下のコマンドを実行します。
$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入
これでディレクトリにCLIがインストールされます。
2. Zenn用のセットアップを行う
続いて以下のnpxコマンドを実行します。
$ npx zenn init
README.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にマークダウンファイル（◯◯.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
コンテンツを作成・編集する
具体的な執筆方法は下記のページをご覧ください。