yarnでzenn-cli導入する

公式の記事でzenn-cliをインストールする記事がありますが、npmでインストールしています
私はyarn派なので、yarnでローカルから記事を投稿できるところまでやってみました

事前準備

公式の記事でzenn-cliをインストールするにある事前準備を行います

yarnでzenn cliを導入する

事前準備で作成したzenn用のリポジトリをクローンして、そのディレクトリで以下のコマンドを実行します

yarn init

対話式で色々聞かれますが、お好みで設定してください
終了したら、以下のコマンドでインストールします

yarn add zenn-cli

Zenn用のセットアップを行う

zennが実行できる様になったので、以下のコマンドでzennの初期化を行います

yarn zenn init

以下のファイル、ディレクトリが作成されたら、セットアップは完了です

• README.md
• .gitignore
• articles/
• books/

ローカルで記事を書いてみる

公式によると、articles/とbooks/にマークダウンファイルを配置することでローカルでも記事の管理ができるようになっています
ファイル名は不問のようですが、最初なのでコマンドで生成したマークダウンファイルを編集することにします
今回は記事を作成したいので、以下のコマンドを実行します

yarn zenn new:article

ランダムな文字列のファイル名でarticles/配下にマークダウンファイルが生成出来たら成功です
あとはこの中身を編集するだけです
編集した内容を確認するには以下のコマンドです

yarn zenn preview

デフォルトの設定であれば、http://localhost:8000/でアクセスすることが出来ます
なお、ファイルを保存しても、リアルタイムでプレビューは反映されないので、ファイルを更新したらブラウザのリロードが必要になります

書いた記事をアップロードする

プレビューを見て、問題なければアップロードします
マークダウンファイル生成時、7行目までにオプション設定があるので、publishedオプションがtrueになっていることを確認します
trueになっていることを確認したら、編集した記事をデプロイ対象のブランチにcommit、Zennと連携したGitHubリポジトリにプッシュします

git checkout デプロイ対象のブランチ
git add マークダウンファイル
git commit -m 'コミットメッセージ'
git push 連携済みのGitHubリポジトリ デプロイ対象のブランチ

プッシュ時のデプロイの仕様についてはGitHubリポジトリでZennのコンテンツを管理する
を参照してください

zenn cliをアップデートする

アップデートが盛んに行われているので、yarnでアップデートを行いました
以下のコマンドで可能です

yarn upgrade zenn-cli