ChromebookにZenn CLIをインストールする方法

Chromebook に Zenn CLIをインストールする方法を紹介します。

Zenn CLIを導入すると、ターミナル上で記事を作成・編集・保存・プレビューできるようになります。

フォルダ(ディレクトリ)を作成

最初にZennを管理するためのフォルダ(ディレクトリ)を作成します。このフォルダ(ディレクトリ)の中に必要なものをインストールしていきます。ここでは「zenn」フォルダ(ディレクトリ)を作成します。

mkdir zenn

作成したフォルダ(ディレクトリ)に移動します。

cd zenn

npmをインストール

Zennをインストールする際にnpmが必要になるのでインストールします。最新版が必要です。※古いバージョンをいったんインストールして後で削除します。

sudo apt install nodejs npm

sudo npm install -g n　※最新版をインストールするために「n」をインストール

sudo n stable　※最新版をインストール

sudo apt purge nodejs npm　※古いバージョンを削除

exec $SHELL -l　※ターミナルに再ログイン

node -v ※バージョン確認

Zenn CLIをインストール

Zenn CLIをインストールしていきます。ここからは公式のマニュアル通りで大丈夫です。なお、コマンドは作成したフォルダ（ディレクトリ）内で実行します。ここでは「zenn」フォルダ（ディレクトリ）内で実行しています。

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

$ npx zenn init #Zenn用のセットアップ

コマンド入力後、以下の内容が表示されます。

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

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

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

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

以下のコマンドを実行することでブラウザでプレビューが開きます。

※公式ではこのように書かれていますが、記事を作成していなければ当然プレビューできるはずがありません。Zenn CLIで記事を作成してからプレビューしてみましょう。記事を作成する方法は、以下の参考サイトを参照してください。

$ npx zenn preview
# 👀 Preview on http://localhost:8000

参考サイト

Zenn CLIの導入手順
https://zenn.dev/zenn/articles/install-zenn-cli?utm_source=pocket_saves

Zenn CLIで記事・本を管理する方法
https://zenn.dev/zenn/articles/zenn-cli-guide