🖌
Zennのローカル環境を構築する
概要
今後 Zenn の記事投稿をしていこうと考えていますが、使い慣れた環境（VScode）でMarkdownの編集を行いたいという気持ちに駆られました。
公式の記事を参考に環境構築を行なった記録です。
必要準備
- Zennアカウント
- GitHub
- Node.js 14以上
手順
ZennとGitHubを連携する
ローカルで作成した記事をデプロイするためにGitHub連携を行う必要があります。
上記、公式の記事を参考に行います。
- 空のリポジトリを作成する
- ZennのダッシュボードからGitHub連携を行う
Zenn CLIを導入する
Zenn Editorを起動してコンテンツのプレビュー確認等を行うために導入します。
※Node.js 14以上の環境が必要になります。
上記、公式の記事を参考に行います。
1. CLIのパッケージをインストール
npm init --yes # カレントディレクトリにpackage.jsonを作成
npm install zenn-cli # zenn-cliをインストール
2. 初期設定
npx zenn init
記事作成に必要なフォルダが作成されます。
「articles」は記事作成用のフォルダ、「books」は本作成用のフォルダになります。
記事を作成する
上記、公式の記事を参考に行います。
1. 記事作成用のファイルを作成
npx zenn new:article
上記コマンドを実行すると記事の設定用の記述がされた.mdファイルが作成されます。
2. プレビューを表示する
npx zenn preview
上記コマンドを実行して、localhost:8000にZenn Editorが起動します。
3. 記事を公開する
.mdファイルの「published」をtrueに変更し、GitHubにpushします。
自動でデプロイされ記事が公開されます。
Discussion