Zennの記事をGitHub連携してVSCodeで作成させる手順④ Node.js(npm)、Zenn-CLIのインストール
前回からの記事の続きになります。
概要
Zennでは、Qiitaにはない機能として、GitHub連携による記事の投稿・管理が行えます。
今回は、GitHubアカウント、Zennアカウントの作成やVSCodeからの記事作成の手順について備忘録も兼ねて記事にしています。
開発環境
- OS：windows10 Home 22H2
記事の構成
以下の順で説明していきます。
本記事では5. node.js(npm)のインストール以降を説明します。
- GitHubアカウントの作成・初期設定 （手順①で説明）
- Zennアカウントの作成・初期設定 （手順②で説明）
- GitHubとZennの連携 （手順②で説明）
- Gitのインストール・初期設定 （手順③で説明）
- Node.js(npm)のインストール ⏪本記事で説明
- Zenn CLIのインストール ⏪本記事で説明
Node.js(npm)のインストール
インストーラのダウンロード
今回、Node.jsのインストールには、以下のサイトを参考にして、NVM for Windowsからインストールす形としました。
NVM for WindowsはGitHubの専用ページからダウンロードできます。
Node.jsを直接インストールする場合
Node.jsのサイトから直接ダウンロード・インストールすることも可能です。
その場合は以下のサイトからダウンロードしてください。
ページ内のREADME.md内にあるInstall nvm-windowsの項目から、最新バージョンのインストール画面に進みます。
ファイル一覧の中から、nvm-setup.zipをダウンロード・解凍して実行します。
インストール作業
インストーラを実行し、ライセンス条項への同意、インストール先の指定、シンボリックリンクの設定を順に行っていきます。
特に、理由がなければデフォルトの設定で問題ないと思います。
最後にインストール完了画面が表示されてインストール完了です。
このあと、Git Bash上でnvmコマンドが実行できるようになります。
インストールが完了していることを確認する場合、version取得コマンドなどが通ればOKです。
nvm version
1.1.11
次に、インストール可能なnode.jsのバージョンを確認するため、以下のコマンドを実行します。
nvm list available
今回は、LTSバージョンの最新である18.16.0をインストールしています。
nvm install 18.16.0
インストール完了後、有効にするnode.jsのバージョンを選択し、npmコマンドが実行できれば問題ありません。
nvm use 18.16.0
npm -v
9.5.1
Zenn CLIのインストール
最後に、コンテンツのプレビュー等に使用するため、Zenn CLIをインストールしていきます。
基本は、公式の手順通りです。
まず、Git Bash上でZennのコンテンツを管理するディレクトリに移動した後、以下コマンドを実行します。
npm init --yes
npm install zenn-cli
コマンド実行後、ディレクトリ上にzenn-cliのフォルダが作成されます。
その後、以下のnpxコマンドを実行します。
コマンドが正しく動作すれば、下の画像のように出力されます。
npx zenn init
これで一通りの準備は完了です。
記事の作成の仕方は以下のZenn公式ページが参考になるかと思いますが、以下のコマンドを実行すると記事用のテンプレートファイルが作成されます（ファイル名は変更して問題ありません）。
npx zenn new:article
その後、以下のコマンドを実行すると、ローカルにサーバが立ち上がり、記事のプレビューが閲覧できるようになります。
※ポート番号を変えなければ、下のリンクをクリックすればいけるはずです（ポート番号が競合する場合は変更することも可能）。
npx zenn preview
プレビューサイトには、記事を作成する上でのTipsがまとまったサイトのリンクもあるので、まずはプレビューを起動しながら記事を作成していく方が効率的かと思います。
おわりに
おもいのほか記事のボリュームが多く、4つの記事に分ける形となってしまいましたが、これでひとまず記事は終了となります。
自分が作成した記事以外にも公式記事含め、参考リンクとして載せております。
自分の記事も誰かが環境構築する際の参考になればと思います。
以上
Discussion