Zenn
✨

Windows で Zenn をローカルで編集する環境を整える

2020/09/20に公開
Zenn
Windows
tech

この記事は何？

Windows で Zenn の編集環境を整えてみた過程を記録するものです。

前提

  • Zenn のアカウント作成済み。

初回のみ実施する作業

GitHubでリポジトリを作る

https://github.com/new

  • 例に合わせて ユーザ名/zenn-content でよい。
  • リポジトリを Public でもよいがここでは Private で作る。
  • README.md は後で npx zenn init で生成されるので作らない。
  • .gitignore は後で生成されるので作らない。

Zenn と GitHub リポジトリを連携する

https://zenn.dev/dashboard/deploys

で ユーザ名/zenn-content を紐づける。

Zenn のクライアントを導入する

記事の作成のためのテンプレートとなる Markdown ファイルを作成できたりする。
また、記事表示を行える。

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

cd $HOME
git clone git@github.com:kumarstack55/zenn-content.git

cd $HOME/zenn-content
npm init --yes
npm install zenn-cli
npx zenn init

約100MBくらい使う。

必要に応じて実施する

記事を作る

cd $HOME/zenn-content
npx zenn new:article

生成された *.md を好みのエディタで編集する。

ファイルの先頭にYAMLが自動で生成されている。なお emoji も必須。
(素の Markdown っぽくなく、若干残念...。)

編集終えたら git commit して push したら記事が反映されるはず。

記事の反映状況はダッシュボードを見る。
エラーもここで確認する。

プレビューを実行する

記事を追加すると、articlesが増える。
記事のレンダリング結果を確認できる。

cd $HOME/zenn-content
npx zenn preview

実行したらブラウザで http://localhost:8000/ を開く。

編集結果とローカルプレビューに不整合あるたびに実施

CLIをアップデートする

cd $HOME/zenn-content
npm install zenn-cli@latest

参考

以上です。

Discussion