Zenn
🔰

Zennを始めるにあたって

に公開
Zenn
初心者
idea

テック系ブログの Zenn を始めるにあたって、環境を整えた時の備忘録です。
最初の記事として。

記事作成の流れ

Zennは、書いた記事を、連携したGitHubのレポジトリへPUSHし、それをトリガーにして、記事を更新する方もを採用しています。
(もちろんWebエディタでも更新できます。)
だから、ローカルで、Zennの規定に沿ったMarkdown記法で記事を書き、GitHubにPUSHすれば、記事を更新できる流れ。

そう聞いて、勘違いしていたのが。。

× [Local] <-> [GitHub] <-> [Zenn] <- [Browser]

◯ [Local] <-> [GitHub] -> [Zenn] <- [Browser]

であり、WebエディタからZenn記事を更新しても、GitHubには反映されないようです。

GitHubを中心とした双方向システムではなく、
あくまでZennを中心とした単方向システムのようです。

そのため、ブラウザかGitHubどちらから記事を更新するかを決めておいた方がいいらしく、私は、GitHubから更新する方法をやってみたく、その準備でやった事を、以下に書いておきます。

基本的には、Zenn公式さんが、手順書を公開しているので、あくまで勝手に追加した周辺作業の私的な備忘録ですが、素の状態からでも構築できる補足をしたつもりです。
(あとから記憶で書いているので間違いはあるかも。。)

https://zenn.dev/zenn/articles/editor-guide

https://zenn.dev/zenn

必要なモノ・考えておくこと

  1. メールアドレス(Zenn登録用、GMailなど)
  2. ユーザー名を考えておく
    (複数考えておいた方がいいかも。。私は２回、重複でNGでした。)
  3. GitHubアカウント

やること

インストール(ローカル側 Windows11を想定)

  1. Git for Windows のインストール
    https://gitforwindows.org/
  2. node.js のインストール
    https://nodejs.org/ja/
  3. Zenn CLIのインストール
    https://zenn.dev/zenn/articles/install-zenn-cli

オプション

  1. お好きなエディタ(e.g. Visual Studio Code)のインストール
  2. お好きなGitClient(e.g. tortoisegit) のインストール
    https://tortoisegit.org/

Zenn設定・ローカル初期化

  1. Zennアカウントの作成
    (GMail, 考えておいたユーザー名)

  2. GithubにZenn連携用レポジトリ作成 (e.g. zenn_connection)

  3. ローカルにレポジトリをクローンする

    $ git clone https://github.com/username/repository/

  4. Githubアカウントの連携 (Zenn設定)

  5. クローンしたディレクトリに移動して、以下のコマンドを実行

    $ npx zenn init

    カレントディレクトリ配下に同期に必要なファイル群が生成される。(初期化)

記事を書く

  1. 以下のコマンドを実行する。

    npx zenn new:article

    カレントディレクトリに、(ランダム文字列=slug).md ファイル(投稿用のテンプレートファイル)が生成される。

    npx zenn new:article --slug article_title

    記事のファイル名を指定したい場合は、こんな感じ。

  2. 好きなエディタ(e.g. Visual Studio Code)で編集する。

  3. ローカルでコミットし、GitHubへPUSHする。
    → これでZennシステム側へ反映される。

記事の確認

Visual Studio Codeで描けば、markdownのPreviewでおおよそ確認できますが、

npx zenn

を実行することで http://localhost:8000/ にアクセスでき、ローカル環境で、表示内容を確認できます。

メモ

  • slugを指定しないで作った記事には、ランダム文字列のようなファイル名が割り当てられ、これがURLに使われる。
    そのため、人間業では、ファイル名から記事を特定できなくなるので、 new:articleの--slugオプションで、任意の文字列を設定したほうがよさそう。

  • 番号付き/なしリスト内でタブ(スペース４つ)にすると、

    改段落したり、ブロックを入れてもインデントしてくれる。素敵ｗ

  • 画像の扱い方は、まだ調べてない。

  • ネットでZennの記事執筆についてしらべていると「スクラッチ」という機能を目にするけど、最新版の npx zenn のオプションには見当たらない。。

  • 投稿カテゴリには、 tech か idea しかない。

  • 公開/非公開(下書き)かどうかは、 publishedで、true/falseで設定する。

  • topics は、["sample", "example] というカタチで列記できる。

★ 適宜、気がついたことは追記予定。

Discussion