🙌

ZennCLIを試してみた

2023/06/05に公開

GitHub

Zenn CLI

tech

ZennCLIを試そうと思った理由

これまでWebUIから記事を書いていたが、記事とプレビューの切り替えがストレスになっていた。
特に記事編集画面とプレビューを切り替えたときに、編集中の位置とプレビューの位置が異なるため、記事開発のUXが悪いと感じた。

そんなときにZennCLIを使えばプレビューを横に表示できると知ったため。
またGitHub連携をすることで、過去記事が自分のGitHubに残るのもいいかもなと思ったため。

本当はピクセルパーフェクトで、WebUIからプレビューのまま記事が書ければ理想だとは思うんだが。

ZennCLIを試そうと思った理由
目次
ZennCLIを試してみてよかったこと
ちょっとめんどくさい（めんどかった）こと
Git連携でやったこと
VSCodeでの記事作成でよく利用するコマンド
GitBashをVSCodeのターミナルで利用するための設定
おまけ

ZennCLIを試してみてよかったこと

VSCodeで記事が書けるようになり、Ctrl+S で保存した瞬間にローカルでのプレビューが更新されるところ。
mdファイルで保存できるので、いざとなったら引っ越しもできそうなこと。
そもそもGitHubにリポジトリがあるので、cloneするのも簡単でよき。

ちょっとめんどくさい（めんどかった）こと

GitHubとの連携に少し時間がかかった
これまで書いた記事の移行が自動ではない、、ので手動でこれから移行しなければいけない

Git連携でやったこと

ローカル環境にZenn専用ディレクトリを作る
そのディレクトリをGit化する
Gitのユーザー設定をする
ディレクトリに.gitignoreファイルを追加してGitHubにpushするものしないものを設定する
ディレクトリにZennCLIの設定をする
GitHubにZenn用リポジトリを作る（Priveteで作ってみた）
SSHの設定をする
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh
1. 秘密鍵と公開鍵をローカル環境に作る
2. GitHubと紐づける
GitHubとローカル環境を同期する
VSCodeでZennディレクトリを開いて記事を書く
Gitでaddしてcommitしてpushする

下記にいくつか詳細をメモしておく

.gitignoreファイルを追加

Git化したディレクトリに.gitignoreファイルを追加して、まずはリポジトリに含めるものと含めてはいけないものを設定する。
全ディレクトリとファイルを無視するが、例外としてarticles以下5つのみ無視しない。

/*
!/articles/
!/books/
!/images/
!/README.md
!/.gitignore

これは、複数PC環境でZennCLIを使う場合、共通部分はGitHub連携して、ローカル環境依存部分はそれぞれのローカルで行うため。

ローカルのGitの設定

git config user.name
git config user.email

でそのディレクトリの現在のユーザー情報確認。

設定する場合は

git config user.name "ユーザー名"
git config user.email "メールアドレス"

zenn-cliの初期化

GitHubとの連携

ディレクトリでzenn-cliを初期化

VSCodeでの記事作成でよく利用するコマンド

# 記事作成（slug設定12〜50字）
npx zenn new:article --slug 記事のスラッグ

# プレビュー開始
npx zenn preview

プレビューはこちら
http://localhost:8000/

記事作成のやり方

GitBashをVSCodeのターミナルで利用するための設定

特定のディレクトリでVSCodeのターミナルをGitBashにすることができますか？

はい、Visual Studio Code (VSCode) では特定のディレクトリやプロジェクトで使用するシェルをカスタマイズすることが可能です。これは .vscode フォルダ内に settings.json ファイルを作成し、その中に設定を記述することで行います。

以下に Git Bash を使用する設定の一例を示します。

ワークスペース内に ".vscode" ディレクトリを作成します（既に存在する場合はスキップ）。
".vscode" ディレクトリを作成し、その中に "settings.json" ファイルを作成します。
以下の内容を "settings.json" ファイルに追加します：

{
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.profiles.windows": {
        "Git Bash": {
            "path": "C:\\Program Files\\Git\\bin\\bash.exe"
        }
    }
}

ここで指定しているパスは Git Bash の実際の実行ファイル（bash.exe）へのパスです。Git Bash のインストール場所によってパスは変わりますので、適宜調整してください。

これで VSCode のターミナルがデフォルトで Git Bash を使用するように設定されます。VSCode を再起動した後に新たなターミナルを開くと、Git Bash が使用されます。

上記の設定は各PCで異なる場合があります。どのようにすれば各PCで別の設定を反映できますか。

リポジトリの共有設定と個々のマシンのローカル設定を分けたい場合、一般的には.gitignoreファイルを使用します。このファイルはGitに対して、特定のファイルやディレクトリをバージョン管理から除外するように指示します。

例えば、VS Codeの設定ファイルがある.vscodeディレクトリをリポジトリのバージョン管理から除外したい場合、以下のような.gitignoreファイルをプロジェクトのルートに作成します。

.vscode/

これにより、.vscodeディレクトリはリポジトリには影響せず、各PCで独自の設定を持つことができます。git addやgit commitの際に、Gitは.vscodeディレクトリを無視します。

おまけ

初期状態ではマークダウンの自動補完がされなくてめんどうだったため、Markdown All in Oneというプラグインを入れた。

Zenn Editorというプラグインを入れたら、かなりはかどった。