はじめに

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

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

c-a-p-engineer/zenn-env

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

実行環境メモ

2020/09/26

Windows Pro 10
Docekr For Windows 2.3.0.5

フォルダ構成

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

┣📂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

./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

./docker-compose.yml

version: "3"

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

使い方

起動

docker-compose up

記事の作成

docker exec -it zenn-env_zenn_1 zenn new:article

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

Zennのスラッグ（slug）とは

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

ここから本文を書く

各種オプションの指定

zenn new:article --slug 記事のスラッグ --title タイトル --type idea --emoji ✨

記事の削除

削除はダッシュボードから行います。安全のため、articlesディレクトリからマークダウンファイルを削除してもzenn.dev上では削除はされません。

記事の削除

本の作成

docker exec -it zenn-env_zenn_1 zenn new:book
# 
# 本のslugを指定する場合は以下のようにします。
# docker exec -it zenn-env_zenn_1 zenn new:book new:book --slug ここにスラッグ

削除はダッシュボードから行います。安全のため、booksディレクトリからマークダウンファイルを削除してもzenn.dev上では削除はされません。
本の削除

プレビュー（docker起動時に自動実行）

docker exec -it zenn-env_zenn_1 zenn preview

最後に

完成画面はこちらのような感じになります。

でけた pic.twitter.com/PC0vh7MTsO
— こぴぺたん@お刺身🐟×タンポポ🌻コンサルタント (@c_a_p_engineer) September 24, 2020

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

参考