zenn.devの使い方まとめ
きっかけ
- 自分用のアウトプットをしたい
- そろそろ得られた知識をマネタイズしたいなぁ
- GitHubdeで管理が楽な上に宣伝効果もあるよね〜
- でもどうやってZennで公開するの？
等などのブログ的発信はもはや必須なので、ライトユーザー向けに注意点を簡単にまとめてみました。 細かい仕様は公式のリンクをたどってください。
最初に知っておくべきこと
① ローカルのエディタで投稿できる
記事作成の手段は次の2パターンがあります。
ここは、好きなエディタを使いたいのでCLIのインストールの一択でしょう。
② CLIのインストールにnpmが必須
Zennのコンテンツを管理したいディレクトリで、以下のコマンドを実行します。
$ npm init --yes # プロジェクトをデフォルト設定で初期化 $ npm install zenn-cli # zenn-cliを導入
次に、Zenn用のセットアップを、以下のnpxコマンドで実行します。
$ npx zenn init
README.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にmarkdownファイル（◯◯.md）を入れていくことになります。
③ GitHubリポジトリと連携して公開される
専用のリポジトリを用意してください。好きな名前でOKです。公開設定はPublicでもPrivateでも大丈夫ですが収益化を考えているならPrivateのほうがいいでしょう。(それもあってから2つ登録できるようです。)
作成後は、次のようにZenn側のデプロイ管理を開いて「Only select repositories」にチェックを入れて、連携するリポジトリを選ぶこと
リポジトリを選択する画面（Zenn.devより）
公開までに知っておくべきこと
① ファイルの形式
１記事１ファイルの原則のもとコマンドでファイルを作成します。
このとき、下記のようにslugオプションをつけてファイル名を指定します。
$ npx zenn new:article --slug what-is-slug # => articles/what-is-slug.md`が作成される
このslugには注意が必要です。なぜならZenn側の理由から次のような性質があるからです。
- スラッグはファイル名になる
- スラッグはユニークでなければならない
- スラッグは /[-a-z0-9]{12,50}/ のパターンの範囲内でなければならない（半角英数字とハイフンで12〜50字）
従って，スラッグは次のように日付つきにしたほうがよさそうです．
$ npx zenn new:article --slug 2020-09-18-what-is-slug
（参考） Zennの記事をほんの少しだけ楽に作成できるVimコマンド
ファイルの中身ですが、次のYAML設定が入ったMDファイルが作られます。
--- title: "" # 記事のタイトル emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ） type: "tech" # tech: 技術記事 / idea: アイデア記事 topics: [] # タグ。["markdown", "rust", "aws"]のように指定する published: true # 公開設定（falseにすると下書き） --- ここから本文を書く
② 独自のmarkdwon記法（抜粋）
diff形式とKaTexの数式表示が使える。
:::messageや:::message alertの独自形式がある。:::details タイトルで文章をトグルすることができる。
独自形式はエディター附属のプレビューでは確認できません。
次のコマンドで記事をプレビューしながら編集します👍
$ npx zenn preview
③ 記事の公開方法
ファイル内のキーをpublished:tureにすることで、連携中のGitHubリポジトリにpushすると自動的に公開されます。
最後に
以上で公開できるようになるはずです。 他にも様々な工夫を皆さんされていて参考になるページがたくさんあります。 ではよきZennライフを😀
