流行りのZennで執筆できるように環境を整えてみました。
GitHub連携（Git管理）することで、ソースをプッシュするとZennに自動デプロイされて便利です。 普段の開発フローと同じ感覚で記事を書けるので、エンジニアにはかなり快適です。
忘れないように手順を残しておきます。
今回、以下の記事を作成しました。
1. GitHubリポジトリの作成と連携 #
-
GitHubで
zenn-content等のリポジトリを作成。プライベートでもパブリックでも良いと書いてあるが、プライベートリポジトリにしておきました。 -
Zennのダッシュボードから「GitHubからのデプロイ」を選択し、リポジトリを連携。
2. ローカル環境のセットアップ（Mac） #
リポジトリをクローンまたはローカルで作成し、ディレクトリに移動して環境を構築します。
cd zenn-content
# CLI install
npm init -y
npm install zenn-cli
# Zenn setup
npx zenn initREADME.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にmarkdownファイル（◯◯.md）を入れていくことになります。
Node.jsのバージョンエラーが出た場合
npx zenn init で Unexpected token '.' が出たら、Node.jsが古いです。Zenn CLIの動作には比較的新しいNode.js環境が必要になるため、Macの場合はHomebrewを使用して最新のLTS（v20以上）へ更新を行います。
現在使用しているバージョンは node -v で確認できます。もし古いバージョンが呼び出されている場合は、以下の手順でHomebrewの最新版へ上書き・シンボリックリンクの再貼付けを行います。
- node installコマンド
# インストール
brew install node
# 権限エラーが出る場合は所有権を修正
sudo chown -R $(whoami) /usr/local/include/node /usr/local/bin
# リンクを上書きして反映
brew link --overwrite node※注意：brew link 時に他のバージョンや古いシンボリックリンクが残っていると競合エラーを起こすことがあります。その場合は上記のように --overwrite フラグを付与することで、Homebrew側で綺麗に最新版へリンクを繋ぎ直してくれます。完了したら再度 node -v を叩き、バージョンが上がっていることを確認してください。
3. 執筆とプレビュー #
CLIで記事のテンプレート（Markdown）を作成し、ローカルサーバーを起動して確認します。
# 記事作成
npx zenn new:article --slug my-first-post-2026
# プレビュー起動
npx zenn previewhttp://localhost:8000 で実際の表示を確認しながら執筆できます。ホットリロードに対応しているため、エディタで保存すると即座にブラウザの表示も更新されます。
知っておくと便利なフロントマターの設定 #
new:article コマンドで生成されたMarkdownの冒頭には、Zenn専用のメタデータ（フロントマター）が含まれています。最低限、以下の項目を確認・調整します。
title: 記事のタイトル（ブラウザ上でいつでも変更可能）emoji: 記事のアイコンとなる絵文字（デフォルトでランダムに設定されます）type: 記事のジャンル（techまたはideaを指定）published: デプロイ時に公開するかどうか（デフォルトはfalse）
4. 公開（デプロイ） #
記事の執筆が完了したら、フロントマターにある published を true に変更して、GitHubへプッシュするだけです。Zenn側がプッシュを検知し、数秒〜数十秒で自動的にデプロイ（公開）が完了します。
git add .
git commit -m "first post"
git push origin main以降は、誤字脱字の修正や内容の追記も、手元で編集してGitプッシュするだけでバックエンドに反映されるようになります。
運用の注意点：スラッグ（slug）の変更について #
自動生成されるMarkdownのファイル名、およびフロントマター内の slug（例: my-first-post-2026）は、Zenn上での記事のURL（zenn.dev/[ユーザ名]/articles/xxxx）になります。
一度 published: true でプッシュして公開したあとに、ローカル側でファイル名やslugを変更して再度プッシュすると、Zenn側では 「古いURLの記事が削除され、新しいURLで別記事が新規作成された」 とみなされてしまうようです。
それまでについた「いいね」や閲覧数がリセットされてしまうため、一度公開した記事のslugは原則変更しないよう注意が必要となります。
公式ドキュメント（参考） #
より詳細な設定や仕様については、公式のガイドを参照してください。
