[macOS]Zenn CLI をインストールして、 VSCode から記事を投稿する

公開:2021/02/07
更新:2021/02/08
2 min読了の目安(約2400字TECH技術記事

はじめに

VSCode から Github 連携を使って記事を書きたいなぁと思って試してみました。
(昨日の記事から Github 連携はしていたのですが、それはヒミツ)

Zenn CLIというものを使えばできるとのこと!
やってみましょう。

公式アカウント様が手順は用意してくださっているのですが、個人的なメモなのでお許しください。

https://zenn.dev/zenn/articles/install-zenn-cli

Zenn CLI をインストールする……の前に

そもそも私の環境に node.js 自体がインストールされていなかったので、まずインストールします。

node.js のインストール

今回、nodebrew を使わせて頂きました。

https://github.com/hokaccha/nodebrew

README.md にも書かれていますが(略)

% curl -L git.io/nodebrew | perl - setup

インストールが終わったら、パスを通します。

% vi ~/.zshenv
.zshenv
- export PATH="/usr/local/bin:$PATH"
+ export PATH="/usr/local/bin:/$HOME/.nodebrew/current/bin:$PATH"

書き換えが終わったら、設定を反映させて、 nodebrew がインストールできたかを確認します。

% source ~/.zshenv # 設定を反映させる
% nodebrew help
nodebrew 1.0.1 # バージョン番号が出れば OK
  :
% nodebrew install stable # 最新 stable (安定版) をインストール
Fetching: https://nodejs.org/dist/v14.15.4/node-v14.15.4-darwin-x64.tar.gz
  :
% nodebrew use v14.15.4 # どのバージョンを使用するかを指定
% node -v # node.js のバージョンを確認する
v14.15.4 # 上で指定した同じバージョンになる
% npm -v # npm のバージョンを確認する
6.14.10

公式の記事には v15 だと ZennCLI がうまく入らないと書いてありましたが、現時点では stable が v14 になっているので問題ないハズです。

Github と Zenn を連携する

ここはそのまま行ったので、公式の記事をご参照ください。

Zenn CLI をインストールする (本当に)

あらかじめ VSCode 上で Github と連携したリポジトリをクローンしておきます。
(今回のパスは ~/Documents/zenn-contents)

% cd ~/Documents/zenn-contents
% npm init --yes # 初期化
% npm install zenn-cli # Zenn CLI をインストール
npm とは?

Node Package Manager
JavaScript 系統のパッケージ管理ツール。 (apt みたいなヤツ)

これで Zenn CLI がインストールできました。

Zenn CLI を初期化する

作業ディレクトリで Zenn CLI を使えるようにします。

% npx zenn init

これを実行すると同ディレクトリに articles, books, node_modules といったディレクトリや .gitignore などのファイルが作成されます。

npx とは?

インストールした npm のパッケージを簡単に実行できるコマンド。
元々どうだったのかはいずれ調査します。

Zenn Editor を起動する

次に、プレビューできるウィンドウを開きます。

% npx zenn preview
👀Preview on http://localhost:8000

と出ますので、ブラウザーで http://localhost:8000 にアクセスすると、内容をプレビューすることができます。ファイルを更新する度に画面が更新される(ホットリロード)ので、すぐ確認できてとても便利です。

% npx zenn new:article
📄 xxxxxxxxxxxxxxxxxxxx.md created.

zenn new:article を使うと、 article ディレクトリに新しいファイルが作成されます。
ファイル名は slug というようです。そのファイルに Markdown で記事を作成していきます。

以下に公式アカウント様の Markdown ガイドのリンクを貼っておきます。

https://zenn.dev/zenn/articles/markdown-guide

記事のタイトルなどは作成されたファイルの頭にある yaml を書き換えて設定します。

記事が完成したら、 Github に push してあげると、自動的に記事が更新されます。

最後に

学んだことなどを Github に履歴管理できるのは、とても便利な仕組みだなと感じています。
今はこれだけでも楽しいので、じっくりと取り組んでいきたいと思います。