🙌

Zenn初投稿です！！Zenn CLI＋dockerでローカルでの執筆環境を作りました！

に公開
Docker
GitHub
Zenn
Qiita
idea

はじめまして！今回，Zennへの投稿が初めてとなります！
最近，時間があ少しあって色々手を出して遊んでいるのですが，数日前にはQiitaの投稿を始めました。

基本的には同じ記事を流していこうと思うのですが，どちらかのみの投稿もあるので良ければご覧いただけたらと思います。

記念すべき初投稿はdocker+Zenn CLIでローカルに執筆環境を作ったのでその共有です。

はじめに

Qiitaの執筆環境をローカルに作っており，それを編集する形としました。
また，複数の端末（Win11デスクトップx2，Win11ノートパソコン，MacBookAir）を使っており，どの端末でも簡単に使えるようにDockerを使用しています。

前提

  1. ZennとGitHubを連携している。
  2. Qiita Cliをdockerで構築している。
    Qiita CLIの構築はQiitaの記事をご覧ください。

https://qiita.com/ikepu-tp/items/c22bf26ee97100f64d9a

環境

  • 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編集

  1. Qiitaのディレクトリを./qiitaにしたのでvolumesを変更します。
  2. 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のインストール

  1. npmを用いてインストールします。
  2. Zennの初期化をします。
docker-compose exec -it zenn sh
npm install zenn-cli #インストール
npx zenn init #初期化

4.Zennのプレビュー

npx zenn preview

以下のURLにアクセスすると，プレビュー画面が表示されます

http://localhost:9999

さいごに

Zenn CLIの詳細はZenn公式の投稿にありますのでそちらをご確認いただけたらと思います。

参考

https://zenn.dev/zenn/articles/install-zenn-cli#2.-zenn用のセットアップを行う

https://zenn.dev/zenn/articles/zenn-cli-guide

GitHubで編集を提案

Discussion