🐡

Zenn執筆環境セットアップ手順(GitHub / VS Code)

に公開
Git
VS Code
Zenn
tech

はじめに

近年、自前の技術ブログの運用に割く時間がなかなか取れなくなってきたため、ブログをZennにお引越しすることにしました。
以下の条件でZennの記事を執筆するときの手順を残しておきます。

  • 記事、画像はGitHubリポジトリ管理
  • VS Codeで執筆

前提条件

記事執筆時の各ソフトウェアのバージョンは以下の通りです。

  • macOS: 15.6.1
  • VS Code: 1.103.2 (Universal)
  • Git: 2.39.5 (Apple Git-154)
  • zenn-cli: 0.2.3

GitHubリポジトリ

以下を参考に新規リポジトリを作成します。特にリポジトリを公開する必要がなければ、プライベートリポジトリとして作成します。リポジトリ名は、zennとしておきます。

新しいリポジトリの作成

初期セットアップ

最初の1回のみ実施。

プロジェクトディレクトリ初期化

空のGitHubリポジトリ (https://github.com/hoge/zenn.git) を初期化します。

# リポジトリをクローンしてディレクトリへ移動
git clone https://github.com/hoge/zenn.git
cd zenn

# package.json を自動生成
npm init --yes

# 必要に応じて .gitignore を作成
cat > .gitignore <<'EOF'
node_modules
.DS_Store
.vscode
dist
EOF

Zenn CLIセットアップ

Zenn CLI のパッケージをインストールします。

% npm install --save-dev zenn-cli

Zenn用のディレクトリを作成します。

 % npx zenn init
Generating 

  🎉  Done!
  早速コンテンツを作成しましょう

  👇  新しい記事を作成する
  $ npx zenn new:article

  👇  新しい本を作成する
  $ npx zenn new:book

  👇  投稿をプレビューする
  $ npx zenn preview

画像もGitHubリポジトリ上で管理したいので、画像保存用フォルダを作成します。

mkdir -p images

VS Code拡張のインストール

VS Code上で記事の作成、プレビューを簡易に行えるように、VS Code拡張のZenn Editorをインストールします。

Zenn Editor

運用

日々の記事執筆で実施すること。

記事作成

記事ファイルの作成をnpx zenn new:articleで行います。同時に、同じスラグ名の画像ディレクトリを作成し、記事中で使用する画像の置き場所として準備します。

SLUG="hoge"
npx zenn new:article --slug $(date +%Y%m%d)-${SLUG} && mkdir -p images/${SLUG}

記事プレビュー

VS Code拡張のZenn Editorをインストールしているので、エディター上のZマークのついたアイコンで記事のプレビューが行えます。
プレビューアイコン

Zenn CLIアップデート

Zenn CLI実行時に新バージョンの通知が出力される場合があります。

% npx zenn new:article

   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │   新しいバージョンがリリースされています: 0.1.159 → 0.1.161   │
   │   npm install zenn-cli@latest で更新してください              │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

created: articles/d5c3a503ae1696.md
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.4.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.1
npm notice To update run: npm install -g npm@11.4.1
npm notice

その場合は、Zenn CLIのアップデートを行います。

% npm install zenn-cli@latest

Discussion