Zenn執筆環境をVSCodeとDockerを使い構築する
はじめに
本記事では、Zennの執筆環境をVisual Studio Code（以下、VSCode）とDockerを使って構築する方法について解説します。
Dockerを使うことで、ローカル環境にnodeを入れずにZenn執筆環境を作ることができます。
必要なソフトウェアのインストール
Dockerのインストール
まず、Dockerをインストールします。公式サイトのインストールガイドを参照して、お使いのOSに合わせた手順でインストールしてください。
VSCodeのインストール
次に、VSCodeをインストールします。公式サイトのダウンロードページから、お使いのOSに合わせたインストーラをダウンロードしてインストールしてください。
VSCodeの拡張機能：Dev Conteinersのインストール
VSCodeにDev Containers拡張機能をインストールします。VSCodeの拡張機能タブを開き、「Dev Containers」と検索してインストールしてください。
コンテナでZenn執筆環境を構築する
GitHubリポジトリからClone
まず、GitHubリポジトリからZennのコンテンツを管理するリポジトリをCloneします。
CloneしたディレクトリをVSCodeで開く
CloneしたリポジトリをVSCodeで開きます。
Directoryとファイルを作成
ディレクトリ構造は以下のようになります。
.devcontainer
├── Dockerfile
└── devcontainer.json
ターミナルで以下のコマンドを実行して、ディレクトリとファイルを作成します。
$ mkdir .devcontainer
$ cd .devcontainer
$ touch Dockerfile
$ touch devcontainer.json
Dockerfileを作成
Dockerfileに以下の内容を記述します。
FROM mcr.microsoft.com/devcontainers/javascript-node:18-bullseye
devcontainer.jsonを作成
devcontainer.jsonに以下の内容を記述します。
// See https://containers.dev/implementors/json_reference/ for configuration reference
{
"name": "Zenn",
"build": {
"dockerfile": "Dockerfile"
},
"remoteUser": "node",
"customizations": {
"vscode": {
"extensions": [
"eamodio.gitlens"
]
}
}
}
Dev Containersでコンテナを実行する
VSCodeでコマンドパレットを開き、"Dev Containers: Open Folder in Container"を実行します。
実行すると、.devcontainerの中のDockerfileおよびdevcontainer.jsonの内容が実行されます。
ビルドが完了するまでしばらく待ちます。
完了したら下記の画像のようにVSCodeの左下に"Dev Container: Zenn"と表示されます。
Zenn CLIをインストールする
ターミナルで以下のコマンドを実行して、Zenn CLIをインストールします。
$ npm init --yes
$ npm install zenn-cli
Zenn用のセットアップを行う
ターミナルで以下のコマンドを実行して、Zenn用のセットアップを行います。
$ npx zenn init
Zenn CLIの操作
Zenn CLIで記事を作成する
ターミナルで以下のコマンドを実行して、新しい記事を作成します。
$ npx zenn new:article
Zenn CLIでプレビューする
ターミナルで以下のコマンドを実行して、プレビューを開始します。
$ npx zenn preview
これで、VSCodeとDockerを使ったZennの執筆環境が整いました。これを利用して、効率的に記事を執筆していきましょう。
まとめ
本記事では、VSCodeとDockerを使ってZennの執筆環境を構築する方法を解説しました。これにより、統一された開発環境で効率的にZennのコンテンツを執筆できるようになります。
参考
Discussion