Zenn執筆環境をDockerとVSCodeで用意する

1 min read読了の目安(約1300字

はじめに

ZennのCLIを利用するにはnode環境が必要です。
ローカル環境を汚したくないのでDocker上でZennの執筆を行えるようにしました。

GitHubとZennの連携

最初に以下に従ってGitHubでZennのコンテンツを管理できるようにします。

Dockerfiledocker-compose.ymlの作成

以下のDockerfiledocker-compose.ymlを好きなディレクトリ内に作成し、Dockerコンテナを立ち上げます。

Dockerfile
FROM node:14

WORKDIR /zenn-content

RUN apt -y update && apt install git -y && \
  npm init --yes && \
  npm install zenn-cli@latest && \
  npx zenn init

docker-compose.yml
version: '3.5'

services:
  zenn:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '8000:8000'
    working_dir: '/zenn-content'
    command: npx zenn preview

これでlocalhost:8000でプレビューを確認できます。

VSCodeで接続し記事を執筆する

VSCodeに「Remote - Containers」拡張機能を入れます。

拡張機能を使い、Dockerfileのあるディレクトリにdevcontainer.jsonを生成しました。
この拡張機能を使うとVSCodeからローカル環境で開発するのと同じ様にコンテナ内のファイルを編集できます。

VSCodeのターミナルを開くことでコンテナ内でコマンドの実行もできます。
次のようにzennのコマンドを実行して記事を作成します。

$ npx zenn new:article --slug 記事のスラッグ

GitHubにアップロードする

記事を執筆したらターミナルからgitを叩いて記事をGitHubにアップロードします。

終わりに

これでローカル環境を汚さずコンテナに引きこもってZennの記事を執筆できるようになりました。