Docker で始める zenn-cli

WSL2 の導入 と Docker のインストール

下記記事を参考にして、Windows 10 Home に Docker を導入した。
Windows 10 Home で WSL 2 + Docker を使う

zenn と GitHub リポジトリを連携する

zenn 公式ドキュメントを参照して作業する。
GitHubリポジトリでZennのコンテンツを管理する

【ホスト作業】コンテナの作成

zenn-cli を導入する用のコンテナを作成する。

実行コマンド

$ docker run --name zenn -v C:\Docker\Share:/usr/src/share -p 8080:8000 -w /usr/src/share/markdown -it ubuntu /bin/bash

各オプションについて

• --name {コンテナ名}
  • コンテナ名を付ける
• -v {ホストマシンのディレクトリ}:{コンテナ内のディレクトリ}
  • ホストマシンのディレクトリをマウントしてアクセス出来るようにする
• -p {ホストマシンのポート}:{コンテナ内のポート}
  • npx zenn preview が port:8000 をデフォルトで使用するので、
    コンテナのポートを 8000 にして ホストの方は任意の番号で。
• -w {コンテナ内のディレクトリ}
  • 起動時に最初からいるディレクトリを指定
• -it {仮想イメージ}
  • おまじない

【コンテナ作業】初期設定

# まずは apt を最新にする
$ apt update

# 文字コードの変更をする
$ apt-get install language-pack-ja-base language-pack-ja
$ locale-gen ja_JP.UTF-8
$ echo export LANG=ja_JP.UTF-8 >> ~/.profile
$ source ~/.profile

【コンテナ作業】npm の導入

作成したばかりのコンテナ内は、npm も入っていないしまっさらな状態なので
整備しつつ npm のインストールを行う。

# nodejs のインストール
# 途中でタイムゾーンを聞かれたりするので 6.Asia -> 79.Tokyo を選択
$ apt install nodejs

# 正常にバージョンが表示されたら成功
$ nodejs -v

# 最後に npm をインストールする
$ apt install npm

【コンテナ作業】git の導入

zenn-cli の導入には git が必須となるため、導入しておく。

# インストール
$ apt-get install git

# インストールされたか確認
$ dpkg -l git

【コンテナ作業】zenn-cli の導入

zenn の記事を管理する /usr/src/share/markdown で作業を行う。
基本的に zenn公式のドキュメント を参照しながら作業しているだけ。

# cli をインストール
$ npm init --yes
$ npm install zenn-cli

# zenn 用のセットアップ
$ npx zenn init

# 結果確認
# コマンド実行後、 http://localhost:8080/ にホストマシンのブラウザからアクセス
$ npx zenn preview

【コンテナ作業】記事を生成する

基本的に zenn 公式ドキュメント を参照して実行している。

# 記事を作成する
$ npx zenn new:article

【ホスト作業】記事の内容を書く

作成された記事のファイルは、ホストマシンの下記ディレクトリに保存されている。
C:\Docker\Share\markdown\{slug}.md

私はホストマシン側で用意している VSCode + textlint の環境で文章を書きたいので、
ホストマシンで記事を書いた。

【コンテナ作業】git のリポジトリと連携する

GitHub の設定

# SSHキーを生成
$ ssh-keygen

# 公開鍵を確認
# 表示された文字列をすべてコピーする
$ cat ~/.ssh/id_rsa.pub

GitHub に公開鍵を登録する。

git の初期設定

$ git config --global user.name "名前"
$ git config --global user.email "メールアドレス"

zenn と連携しているリポジトリにファイルを push

$ git init
$ git add .
$ git commit -m "test commit"
$ git branch -M main
$ git remote add origin {リポジトリの ssh アドレス}
$ git push -u origin main