Zenn CLI + Docker + Makefile 環境で記事を書く

はじめに

こちらの記事は今回ご紹介する環境で作成し、GitHub 連携経由で公開してます。

最終的なディレクトリ構成

root
├─ articles/
├─ books/
├─ images/
├─ node_modules/
├─ .gitignore
├─ docker-compose.yml
├─ Dockerfile
├─ Makefile
├─ package-lock.json
├─ package.json
└─ README.md

Docker 環境を構築します

必要なファイルを作成し、ビルドを実行したら完了です。

Dockerfile

FROM node:lts-buster-slim

WORKDIR /app

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
    tty: true
    volumes:
      - ./:/app:cached
    command: npx zenn preview
    ports:
      - "8000:8000"

$ docker compose build

Zenn CLI 環境を構築します

公式サイト Zenn CLI をインストールする を見ながら構築しました。

$ docker-compose run --rm app npm init
$ docker-compose run --rm app npm install zenn-cli
$ docker-compose run --rm app npx zenn init

Makefile でコマンドを簡易化します

Makefile を作成し、README.md にコマンドを記載しておきます。

Makefile

build:
	docker compose build

run:
	docker compose up

down:
	docker compose down

article:
	docker compose run --rm app npx zenn new:article

package.ci:
	docker compose run --rm app npm ci

README.md

### 環境構築
$ make build
$ make package.ci

### 起動
$ make run

### 停止
$ make down

### 新規作成
$ make article

プレビューを立ち上げてみます

$ make run

http://localhost:8000 にアクセスできたら完成です 🎉