🙌
Zenn初投稿です！！Zenn CLI＋dockerでローカルでの執筆環境を作りました！
はじめまして！今回，Zennへの投稿が初めてとなります！
最近，時間があ少しあって色々手を出して遊んでいるのですが，数日前にはQiitaの投稿を始めました。
基本的には同じ記事を流していこうと思うのですが，どちらかのみの投稿もあるので良ければご覧いただけたらと思います。
記念すべき初投稿はdocker+Zenn CLIでローカルに執筆環境を作ったのでその共有です。
はじめに
Qiitaの執筆環境をローカルに作っており，それを編集する形としました。
また，複数の端末（Win11デスクトップx2，Win11ノートパソコン，MacBookAir）を使っており，どの端末でも簡単に使えるようにDockerを使用しています。
前提
-
ZennとGitHubを連携している。 -
Qiita Cliをdockerで構築している。
Qiita CLIの構築はQiitaの記事をご覧ください。
環境
- Windows11
- WSL2
wsl2
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.2 LTS"
最終的な形
dir
/root
/.github/workflows
- publish.yml #Qiita投稿用workflow
/articles
- *.md #Zenn投稿用Markdown
/books
- *.md #Zennの本用Markdown
/qiita
/.config
- credentials.json #これがないとエラーが起きる なぜ？
/public
- *.md #Qiita投稿用Markdown
- Dockerfile #Qiita用node
- package.json
- qiita.config.json
/zenn
- Dockerfile #Zenn用node
- .gitignore
- docker-compose.yml
- package.json
- README.md #ZennCLIでインストールすると勝手に作られたがなくてもよい
構築手順
1. docker-compose編集
-
Qiitaのディレクトリを./qiitaにしたのでvolumesを変更します。 -
Zennのコンテナを追加します。
docker-compose.yml
version: "3"
services:
qiita:
container_name: qiita
build:
context: .
dockerfile: ./qiita/Dockerfile
tty: true
ports:
- 8888:8888
volumes:
+ - ./qiita:/qiita
environment:
TZ: Asia/Tokyo
+ zenn:
+ container_name: zenn
+ build:
+ context: .
+ dockerfile: ./zenn/Dockerfile
+ tty: true
+ ports:
+ - 9999:8000
+ volumes:
+ - ./:/zenn
+ environment:
+ TZ: Asia/Tokyo
2. Qiita投稿用のワークフローの編集
Qiitaのディレクトリを変更したのでワークフローを編集します。
publish.yml
name: Publish articles
on:
push:
branches:
- main
+ paths:
+ - "qiita/**"
workflow_dispatch:
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: false
jobs:
publish_articles:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: increments/qiita-cli/actions/publish@v1
with:
qiita-token: ${{ secrets.QIITA_TOKEN }}
+ root: "./qiita/"
3. Zenn Cliのインストール
-
npmを用いてインストールします。 -
Zennの初期化をします。
docker-compose exec -it zenn sh
npm install zenn-cli #インストール
npx zenn init #初期化
4.Zennのプレビュー
npx zenn preview
以下のURLにアクセスすると，プレビュー画面が表示されます
さいごに
Zenn CLIの詳細はZenn公式の投稿にありますのでそちらをご確認いただけたらと思います。
参考
Discussion