Zenn CLI dockerで簡単構築

# はじめに
Zenn は GitHubリポジトリと連携することで記事、本の管理がGitHubで行えるようになります。
またローカル環境を作成することでオンラインエディタではなく自分の好きなエディタを選ぶことが可能になります。
ローカル環境に色々と入れるのが面倒なので docker で簡単に構築できる環境を作成しました。

先に環境だけ欲しいという方はこちらを使用してください。

[ c-a-p-engineer/zenn-env ](https://github.com/c-a-p-engineer/zenn-env)

``` READE.ME ``` を見て頂ければ使用方法を記載しております。

## 実行環境メモ

2020/09/26

* Windows Pro 10
* Docekr For Windows 2.3.0.5

# フォルダ構成
フォルダ構成は以下の通りになります。

```bash
┣📂articles # 記事ディレクトリ
┃ ┣📝articles-1.md
┃ ┣📝articles-2.md
┃ ┗📝articles-3.md
┣📂books # 本ディレクトリ
┃ ┗📂book1
┃   ┣📝1.md
┃   ┣📝2.md
┃   ┣📝config.yaml
┃   ┗📷cover.png
┣📂docker # Docker用ディレクトリ
┃ ┗📝Dockerfile
┗📝docker-compose.yml
```

# Docker環境構築
Dockerを入れてない方はこちら → [Docker](https://www.docker.com/) 


```docker:./docker/Dockerfile
FROM node:14

ENV NODE_PATH /opt/node_modules

WORKDIR /workspace

RUN apt-get -y update && apt-get install -y --no-install-recommends \
        git \
    && apt-get -y clean 

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

```bash:./docker-compose.yml
version: "3"

services:
  zenn:
    build:
      context: .
      dockerfile: docker/Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - ".:/workspace"
    command: npx zenn preview
```

# 使い方

## 起動
```bash
docker-compose up
```
http://localhost:8000

## 記事の作成
```bash
docker exec -it zenn-env_zenn_1 zenn new:article
```


記事の中身 ``` ./articles/{slug}.md```

[Zennのスラッグ（slug）とは](https://zenn.dev/zenn/articles/what-is-slug)

```
---
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
---

ここから本文を書く
```

### 各種オプションの指定

```
zenn new:article --slug 記事のスラッグ --title タイトル --type idea --emoji ✨ 
```
### 記事の削除
削除は[ダッシュボード](https://zenn.dev/dashboard)から行います。安全のため、``` articles ```ディレクトリからマークダウンファイルを削除してもzenn.dev上では削除はされません。<br>
[記事の削除](https://zenn.dev/zenn/articles/zenn-cli-guide#%E8%A8%98%E4%BA%8B%E3%81%AE%E5%89%8A%E9%99%A4)

## 本の作成
```bash
docker exec -it zenn-env_zenn_1 zenn new:book
# 
# 本のslugを指定する場合は以下のようにします。
# docker exec -it zenn-env_zenn_1 zenn new:book new:book --slug ここにスラッグ
```
削除は[ダッシュボード](https://zenn.dev/dashboard)から行います。安全のため、``` books ```ディレクトリからマークダウンファイルを削除してもzenn.dev上では削除はされません。
[本の削除](https://zenn.dev/zenn/articles/zenn-cli-guide#%E6%9C%AC%E3%81%AE%E5%89%8A%E9%99%A4)

## プレビュー（docker起動時に自動実行）
```bash
docker exec -it zenn-env_zenn_1 zenn preview
```

# 最後に
完成画面はこちらのような感じになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">でけた <a href="https://t.co/PC0vh7MTsO">pic.twitter.com/PC0vh7MTsO</a></p>&mdash; こぴぺたん@お刺身🐟×タンポポ🌻コンサルタント (@c_a_p_engineer) <a href="https://twitter.com/c_a_p_engineer/status/1309243130844045312?ref_src=twsrc%5Etfw">September 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

Githubで管理・連携できる事からZennを使用してみようかと思います。

# 参考

* [GitHubリポジトリでZennのコンテンツを管理する](https://zenn.dev/zenn/articles/connect-to-github)
* [Zenn CLIをインストールする](https://zenn.dev/zenn/articles/install-zenn-cli)
* [Zenn CLIを使ってコンテンツを作成する](https://zenn.dev/zenn/articles/zenn-cli-guide)
* [ZennのMarkdown記法](https://zenn.dev/zenn/articles/markdown-guide)
* [Zennのドキュメント用リポジトリ](https://github.com/zenn-dev/zenn-docs)