Zenn
🐳

Zenn CLI環境をdockerで構築し、Github経由で記事投稿を行う

2020/09/22に公開
Docker
GitHub
Node.js
Bash
Zenn
tech

はじめに

こんにちは。たかぱい（@takapy0210）です。

みなさんご存知の通り、ZennとGitHubリポジトリを連携することで、ローカルの好きなエディターで投稿コンテンツの作成・編集ができます。
このローカルでの執筆時には「Zenn CLI」を導入すると、Markdownファイルの作成がスムーズになったり、コンテンツをプレビュー表示することが可能になります。
このZenn CLIはNode.js製のため、はじめて使う場合は環境構築（Node.jsのインストールなど）が必要となります。

ローカルに直接環境構築しても良いのですが、環境をあまり汚したくない人も多いのでは？と思い、このZenn CLI環境をdockerで構築してみました。

コードは下記リポジトリで公開しています。
https://github.com/takapy0210/zenn-content

また、本記事もここで紹介するdocker環境で作成したものになります。

コンテナ環境の準備

Githubと連携するローカルディレクトリにDockerfileとdocker-compose.ymlの2ファイルを用意します。
また、記事のmdファイルを自動生成する際、ファイル名に日付prefixをデフォルトで付与するためのスクリプトも用意しました。

Dockerfile

dockerfileです。

FROM node:12
LABEL takapy <hgoehoge@gmail.com>

WORKDIR /workspace

RUN apt-get -y update && apt-get install -y --no-install-recommends \
        git \
    && apt-get -y clean \
    && rm -rf /var/lib/apt/lists/*

RUN npm init --yes \
    && npm install -g zenn-cli@latest

# Locale Japanese
ENV LC_ALL=ja_JP.UTF-8
# Timezone jst
RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

docker-compose.yml

docker-composeファイルです。

version: '3.8'

x-template: &template
  build:
    context: .
  volumes:
    - ./:/workspace

services:
  zenn-init:
    container_name: zenn-init
    image: zenn-init:latest
    command: npx zenn init
    <<: *template
  zenn-preview:
    container_name: zenn-preview
    image: zenn-preview:latest
    ports:
      - "8000:8000"
    command: npx zenn preview
    <<: *template
  zenn-new-article:
    container_name: zenn-new-article
    image: zenn-new-article:latest
    command: /bin/bash new-article.sh
    <<: *template

new-article

新規記事のテンプレートを作成するスクリプトです。
初期ファイル名に日付prefixをデフォルトでつけたいがために作成しました。（ファイル名はnew-article.sh）

#!/bin/bash

# get date
slug=$(date '+%y%m%d%H%M')

# create article
npx zenn new:article --slug "$slug"_hoge --title タイトル --type tech --emoji 🍀

zenn CLI環境のビルド&初期化

コンテナをビルドし、zenn環境の初期化処理を行います。
docker-compose up -d zenn-initを実行すると、カレントディレクトリにarticlesやbooksといったディレクトリが自動的に生成されます。

# ビルド
$ docker-compose build

# 初期化
$ docker-compose up -d zenn-init

>>>
Creating zenn-init ... done
Attaching to zenn-init
zenn-init       |
zenn-init       |   🎉Done!
zenn-init       |   早速コンテンツを作成しましょう
zenn-init       |
zenn-init       |   👇新しい記事を作成する
zenn-init       |   $ zenn new:article
zenn-init       |
zenn-init       |   👇新しい本を作成する
zenn-init       |   $ zenn new:book
zenn-init       |
zenn-init       |   👇表示をプレビューする
zenn-init       |   $ zenn preview
zenn-init       |
zenn-init exited with code 0

記事の作成

下記コマンドで新規記事（.mdファイル）を作成できます。
時系列で管理しやすいように、初期ファイル名はYYMMDDhhmm_hoge.mdとなるようにしています。

# 新規記事のテンプレートファイルを作成
$ docker-compose up -d zenn-new-article

作成した記事のプレビューを表示

記事を作成したら、プレビューで意図した内容になっているか確認します。
（ブラウザでhttp://localhost:8000にアクセスして確認できます）

# 記事のプレビューを表示
$ docker-compose up zenn-preview

>>>
👀 Preview on http://localhost:8000

こんな感じでプレビューが表示されます↓
プレビュー画面

プレビューで問題がなければ、Githubにpushして終わりです！

最後に

記事データをGitHubのリポジトリで管理できるのは結構便利だと思っているので、これを機に試してみてはいかがでしょうか。

参考

Discussion