あけましておめでとうございます.
『Rabee』というクリエイター集団の会社を経営している @phi と申します.
zenn はリリース当初からすごく気になっていて, 年末年始の休みでがっつり触ってみたんですが, 最高に使いやすいサービスでした!
特に github 連携は, 非エンジニア含めうちのメンバーにとって良い勉強にもなると思ったので会社として本格的に導入しようと思いこのエントリーを書きました.
社内向けに書いた内容, かつ公式のセットアップ方法にちょっと付け加えただけですが参考になれば幸いです.
基本セットアップ
まずは
に書いてあることを上から順番にやっていくだけです.
- github で zenn というリポジトリを作成
- ダッシュボード で↑で作ったリポジトリと連携
Zenn CLI セットアップ
Zenn CLI を使えるようにすることでローカルで zenn のコンテンツを作成, 編集, 反映することができるようになります.
- ローカルにリポジトリをクローンしてそのディレクトリに移動
-
$ npm init --yes... package.json セットアップ -
$ npm install zenn-cli... zenn-cli をインストール -
$ npx zenn init... zenn のディレクトリ構成でセットアップ -
$ npx zenn preview... http://localhost:8000 でページ見られればセットアップ完了!
よく使うコマンドを package.json に登録する
ここからは付け加えた部分になります.
zenn のコマンドを npm run でサクッと呼び出せるようにラップしてます.
package.json
"scripts": {
"setup": "npm install",
"preview": "npx zenn preview",
"new": "npx zenn new:article --slug",
...
こうすることで以下のコマンドでプレビューが立ち上がり
$ npm run preview
以下のコマンドで指定した slug の md ファイルが生成されるようになります
$ npm run new hoge-foo-bar
あとは生成されたファイルを編集し, github に push するだけで zenn に自動で反映されます.
記事の構成
- title ... コンテンツのタイトルです. わかりやすく付けましょう!
- emoji ... そのコンテンツに関連する絵文字を設定します. OGP の代わり的なやつかな？
- type ... tech か idea を選択します.
- topics ... そのコンテンツに関連する topics を設定します.
- published ... true にすると公開されます.
ローカルルール
- slug は極力コンテンツに関連するキーワードを入れよう(12~50文字)
- 検索時にわかりやすくなるのと重複を避けるため
- rabee という topics をつけよう
- チームメンバーのコンテンツを見逃さないようにするため
- ネガティブなことや誹謗中傷は書かないようにしよう
- 基本ポジティブに! 問題提起的なことはもちろん OK
-
https://zenn.dev/topics/rabee/feed を feedly で登録して購読しよう
- rabee という topics がついてればタイムラインでもれなくチェックできます!
- 疑問点や気になったことは積極的にコメントしよう
- 議論が活発になるのは良いこと. 筆者もそこから色々学べると思う
- 良かったコンテンツ, 参考になったコンテンツには惜しみなくハートを
- アウトプットしてくれた人に敬意と尊重を!
注意点
- github 連携した場合, website の zenn.dev では記事を新規作成できなくなります
- 必ず npm run new で記事を生成するようにしましょう
- website の zen.dev で記事を編集しても, git 側で push すると上書きされます
- 必ず git のほうで編集するようにしましょう
さいごに
zenn は, サービスコンセプトにのっとってしっかりサービス設計されていて,
かつ見た目もきれいで使いやすいので触りながら色々と学べることがたくさんあると思います.
ここで学んだ知見を, 今請けているサービスや各々が作っている自社プロダクトに活かしていってもらえたらと思います.
Discussion
👏