はじめに
Zenn は GitHubリポジトリと連携することで記事、本の管理がGitHubで行えるようになります。
またローカル環境を作成することでオンラインエディタではなく自分の好きなエディタを選ぶことが可能になります。
ローカル環境に色々と入れるのが面倒なので docker で簡単に構築できる環境を作成しました。
先に環境だけ欲しいという方はこちらを使用してください。
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
---
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を使用してみようかと思います。