Zenn
📝

Zennの執筆環境をVSCodeのdevcontainerで構築してみた

2023/02/17に公開
Docker
VS Code
Zenn
Node.js
tech

要約

  • Zennの執筆環境をdevcontainerで作ってみたので運用含めて共有したい

ここまでやったこと

Githubリポジトリ連携

これについては公式記事を参考いただくのが間違いないのでご覧ください。

私の場合はすでにZennのサイト上でいくつか記事を書いていましたので、下記も参考にしました。

devcontainerとちょっとした便利コマンドを作る

エクスポートしてきたarticlesやscrapsのディレクトリと同階層に以下のファイルを作成します。

.devcontainer/devcontainer.json
{
    "name": "Zenn-cli",
    "build": {
        "context": "../docker",
        "dockerfile": "../docker/Dockerfile"
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "negokaz.zenn-editor",
                "davidanson.vscode-markdownlint",
                "yzhang.markdown-all-in-one"
            ]
        }
    },
    "workspaceMount": "source=${localWorkspaceFolder},target=/home/node/workspace,type=bind",
    "workspaceFolder": "/home/node/workspace"
}
docker/Dockerfile
FROM node:lts-bullseye-slim AS dev
RUN apt update && apt install git vim xclip -y && apt clean
RUN yarn global add zenn-cli textlint

ENV COMMAND_PATH /home/node/command
ENV WORK_PATH /home/node/workspace

USER node

WORKDIR $COMMAND_PATH
COPY command/ $COMMAND_PATH

WORKDIR $WORK_PATH

RUN { \
    echo "source /usr/share/bash-completion/completions/git"; \
    echo "export PATH=$HOME/command:$PATH"; \
} >> ~/.bashrc
docker/command/preview
#!/bin/sh
zenn preview --port 9876

previewはzenn-cliのプレビュー機能を起動するコマンドです。なんとなくデフォルトポートから変えておきたかったのと、多用しそうなのでコマンドにしてしまうことにしました。
このファイルはローカルで作成したらcommandディレクトリ上でchmod 777 previewと打ってパーミッションを変更しておく必要があります。

Dockerfileではgitのコード補完と、commandディレクトリへのパス追加を行なっています。

ここまで行なったら、VSCode上でCommand+shift+PしてRebuild and Reopen in Containerを選択します。

Rebuild and Reopen in Container

一度ビルドしたら、以降はReopen in ContainerでOKです。

Reopen in Container

記事の作成フロー(私の場合)

新規記事の作成

zenn new:article

ブランチを切る

main向きの任意のブランチ名を決めてgit checkout -bします。

記事の執筆

VSCodeでがんばって書く。
記事のプレビューは作成したpreviewコマンドを活用します。

画像の添付

commit/pushする

任意のタイミングでcommitしたりpushしたりします。

topicsを決めて公開フラグをONにする

記事に関連するだろう任意のtopicsを決めて、メタ情報のtopics欄を埋めます。
公開する場合は忘れずにpublished: trueにしておきます。

mergeする

書き上がったらmainブランチにマージします。

おわりに

以上です。この環境はまだ私自身も使い始めたばかりなので、随時ブラッシュアップして、新しい知見は共有したいと思います。

ではまた！

参考記事

Discussion