Zenn執筆環境をVSCodeとWSL2で整える

やりたいこと

社内でZennで頑張って情報発信している人がいて、かっこいいのでちょっとだけ自分もできる範囲でやってみることにした。
ZennはWebでMarkdown書くだけじゃなく、VSCodeで書けるっていうのは前にどこかでちらっと見たのでまず環境を整える。

公式とかWebでググって調べられる手順は、Node.jsをインストール、の部分をさらっと書いているけど
環境汚したくないからDockerでやりたいねんっていう人の手順。

前提

• Windows 11
• VSCode
• WSL2 で Ubuntu 24.04が動いていてDockerが使える状態
• Githubのアカウントがある

整備した順番

1. GitHubにリポジトリを作る
2. WSL2上に適当なフォルダを作ってリポジトリをクローンする
3. VSCodeでWSL2のフォルダを開く
4. Docker Composeファイルを作る
5. Zenn CLIをセットアップして記事執筆用フォルダとしてセットアップしてテスト記事を作成（本稿）
6. Zenn側でリポジトリと接続(簡単)

リポジトリ作るときの要所

最終的にこんな風にはなるのだが

├── README.md
├── articles
│   └── 4591988f0eba09.md
├── books
├── docker-compose.yaml
├── node_modules
│   └── (省略)
├── package-lock.json
└── package.json

最初に作るのは docker-compose.yaml のみでいいと思う。

services:
  zenncli:
    image: node:24-alpine
    container_name: zenncli
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - "3000:3000"

んで、以下のコマンドをポチポチする

$ docker compose run --rm zenncli sh -c "npm init --yes && npm install zenn-cli"
$ docker compose run --rm zenncli sh -c "npx zenn init"

これで package.json と node_modules ができる。のと articles と books フォルダもできた。

.gitignore は自動で生成されるという噂もあるが、自分の場合は手動で作った。

# Node.js Libraries
/node_modules/

記事を作ってみる

docker compose run --rm zenncli sh -c "npx zenn new:article"

したら、 articles フォルダの中にMarkdownファイルができた。

大体環境が整ったのと、後は記事を書いてPushしてみるとZenn側でも公開された。やった。

今後の繰り返し作業の省力化

以下のコマンドは、毎回実行したくないのでシェルスクリプト化しておいてもいいが、 README.md にでも書いておく。

# Create a new article
$ docker compose run --rm zenncli sh -c "npx zenn new:article"

# Previwe with Temorary server
$ docker compose run --rm -p 3000:3000 zenncli sh -c "npx zenn preview --port 3000"

docker-compose.yaml の ports の部分は、 run の時は聞かないんで
こうやってコマンドに書かないといけないんですよ。知ってましたか。知らないと2時間くらい溶けることあります。

後で気づいたこと

• Githubのレポジトリで記事書くようにすると、Webからはもう新しい記事も書けないし記事の修正もできぬ。リポジトリ→Zennへの単一方向のみ。
• プルリクとかマージとかめんどくさいのでmainブランチのみで荒い運用をすることを恥とは思わないし、世界の皆さんもこれを低レベルと頭ごなしに決めないでほしいと願う。