🖌

Zennのローカル環境を構築する

2023/11/04に公開

概要

今後 Zenn の記事投稿をしていこうと考えていますが、使い慣れた環境(VScode)でMarkdownの編集を行いたいという気持ちに駆られました。

公式の記事を参考に環境構築を行なった記録です。

必要準備

  • Zennアカウント
  • GitHub
  • Node.js 14以上

手順

ZennとGitHubを連携する

ローカルで作成した記事をデプロイするためにGitHub連携を行う必要があります。

https://zenn.dev/zenn/articles/connect-to-github
上記、公式の記事を参考に行います。

  1. 空のリポジトリを作成する
  2. ZennのダッシュボードからGitHub連携を行う

Zenn CLIを導入する

Zenn Editorを起動してコンテンツのプレビュー確認等を行うために導入します。
※Node.js 14以上の環境が必要になります。

https://zenn.dev/zenn/articles/install-zenn-cli
上記、公式の記事を参考に行います。

1. CLIのパッケージをインストール

npm init --yes # カレントディレクトリにpackage.jsonを作成
npm install zenn-cli # zenn-cliをインストール

2. 初期設定

npx zenn init

記事作成に必要なフォルダが作成されます。
「articles」は記事作成用のフォルダ、「books」は本作成用のフォルダになります。

記事を作成する

https://zenn.dev/zenn/articles/zenn-cli-guide
上記、公式の記事を参考に行います。

1. 記事作成用のファイルを作成

npx zenn new:article

上記コマンドを実行すると記事の設定用の記述がされた.mdファイルが作成されます。

2. プレビューを表示する

npx zenn preview

上記コマンドを実行して、localhost:8000にZenn Editorが起動します。

3. 記事を公開する

.mdファイルの「published」をtrueに変更し、GitHubにpushします。
自動でデプロイされ記事が公開されます。

Discussion