概要
- zenn-cli のセットアップから、ローカル（VSCode）で Zenn 記事執筆 → Github と連携して投稿する流れについて記載しました
- 以前記事を書いたときは Web 上で書いたのですが、IDE と Git を使って書く方法も便利だと聞いたので、今回はそちらを試してみようと思います
- 改めて書くほどでもないかもですが、せっかくなので一連の流れを記録しておきます
前提
Node: v25.0.0
zenn-cli 導入まで
-
事前準備
Zenn 記事用のディレクトリを任意の場所に作成 -
Zenn CLI をインストール
作成したディレクトリで下記コマンドを叩いてインストールする
npm init --yes # プロジェクトをデフォルト設定で初期化
npm install zenn-cli # zenn-cli を導入
- Zenn 用のセットアップを行う
npx zenn init
→ このコマンドで README.md や.gitignore のほか、articles と books という名前のディレクトリが作成されます。
ここまでで基本のセットアップが完了です。
記事執筆まで
-
記事の md ファイルを作成
npx zenn new:articleまたは下記のコマンドで slug を指定して作成
npx zenn new:article --slug what-is-slug // => articles/what-is-slug.md`が作成される -
タイトルなどを記載する
published は false で下書きのままで進めます
-
本文を執筆する
Markdown 記法で本文を記載します。
自分は Markdown 記法に不慣れなので、Zenn の Markdown 記法一覧を見ながらやってました。 -
画像の準備
images ディレクトリを作成し、その配下に適宜画像ファイルを格納します。
※/images ディレクトリの中の構造に制限はないが、拡張子だけはチェック対象とのこと今回は例にならい、このような感じで配置しました。
. ├─ articles │ └── zenn-writing-setup.md // 今回作成した記事 └─ images ├── example-image1.png └── zenn-writing-setup // 作成した記事名とリンクしたディレクトリ名で作成 └─ image1.png -
書いた内容をプレビューする
下記コマンドでローカルホストが立ち上がり、ブラウザで記事の内容を確認できます。npx zenn preview
諸々のガイドなどのページも確認できるのでめちゃ便利
Github 連携まで
-
Github にリポジトリを作成する
公開設定は Public でも Private でも OK です。 -
Zenn のダッシュボードから連携する
リポジトリを連携するをクリック
連携へ進むをクリック
Only select repositories をクリック
ここで Select repositories から、先程作成した Github リポジトリを選択します。
Install & Authorize で連携完了です。
※同期したいブランチ名の確認・変更については、Zenn ダッシュボードの Github 連携 > リポジトリ設定タブからできます。
Zenn 記事投稿まで
-
公開設定
本文を記載したら、publishedオプションをtrueに変更して公開設定にします。
※公開予約の日時設定も可能です ↓
published: true # trueを指定する published_at: 2050-06-12 09:03 # 未来の日時を指定する -
Github リポジトリに push する
執筆した md ファイルを、先程連携したリポジトリに push します。 -
公開完了 🎉
これで執筆~投稿まで完了です。簡単！
感想
設定に手間がかかるなら今まで通り Web から投稿でいいかな〜と思ってましたが、
公式や実際に試した方の記事が豊富なのでスムーズかつ簡単にセットアップできました！
せっかく Github と連携したしもっと記事投稿しよ ✌🏻 というモチベにもなったのでおすすめです。
参考記事
Discussion