Zenn
🐣

Zenn執筆環境を整えるまでの流れ

2024/11/25に公開
Zenn
ポエム
Zenn CLI
marmaid
idea

Web Editor 以外で Zenn の記事作成ができるようになるまで

全体像が分かりにくかったのと marmaid の Diagram の作成練習を兼ねて作成した。
個別の具体的な作業はほかの方々が書かれている記事などを参照のこと。

OSや環境によってはあらかじめ入っているものがあるので適宜読み飛ばす。
既存の設定と干渉する場合もあり得るので(特にGitHubと公開鍵作成)要注意。

また VSCode を使う前提の図を描いたが、VSCode を使うことは必須ではない。別のエディタで執筆して直接 Git コマンドをたたくやらでも問題なく実現可能である。

VSCode のプレビューではエラーチェックは弱いので Zenn CLI で直接プレビューを確認することは必要。
(2024.12.14修正) VSCode本来のプレビュー機能以外に、ZennEditor: Open Previewが増えており、それだと Zenn CLI のプレビューなので便利。
本来のプレビューだと編集個所に追従するが、ZennEditor プレビューだと追従しないのでうまく使い分けるのがよさそう。

しかし入り組んだ図になったせいで小さくて読めないな…。

Zenn CLI 執筆環境セットアップまでの流れ

Zenn Webサイト上で必要な作業

  • Zenn アカウント登録
  • Zenn-GitHub連携設定
  • 作成記事のPush後のdeploy正常終了/表示確認

(管理者権限で)インストールが必要(かもしれない)もの

  • Node.js
    • Zenn CLI を動かすために必要
  • Git
    • GitHub リポジトリ管理 (Zenn-GitHib 連携) のために必要
  • OpenSSH
    • 最初から入っている場合がほとんどなので気にしなくてもよいかもしれない
  • VSCode
    • 必須ではない

GitHub サイト上で必要な作業

  • GitHubアカウント登録
  • SSHログインのための公開鍵登録
  • Zenn 執筆記事のためのリポジトリ作成

ローカル環境で必要な作業

  • ssh-keygen で公開鍵の作成
  • git config (Global な username, email の設定)
    • Global 設定でなく、リポジトリローカルの設定でもよいかもしれない
  • 執筆用ディレクトリの作成
  • 執筆ディレクトリ直下で Zenn CLI のインストール
  • CLI のプレビューコマンド実行
    • 作成した記事にエラーがないことの確認
  • VSCode 上の作業 (もしくは git コマンド実行/エディタ上作業)
    • VSCode 拡張機能 (Zenn Editor 等) のインストール
    • GitHub 上にある Zenn 記事リポジトリの Pull
    • Zenn記事 (article/book) の作成
    • Commit して GitHub のリポジトリに Push

初版公開日: 2024/11/25
最終更新日: 2024/12/14

Discussion