0. はじめに
巷で話題の Zenn というプログラマ向け情報共有サイト (公式サイトは こちら) を試してみたので、専用CLIツール導入までのメモをここに残しておく
1. 特徴
- Qiita と違い、投げ銭機能がある
- 掲載は、マークダウン形式だけではなく、本やスクラップ形式の投稿ができる
- 専用のCLIツールがある → 好きなテキストエディタで編集可能
何といっても、この機能が最大の目玉だと思う
GitHub連携機能もあり、指定したレポジトリと同期させられる
しかも、Public・Private問わずというのはスゴい
2. 登録
登録は、Googleアカウントのみでできるので手間は無い
3. ローカル作業の準備
3.0 Node.js のインストール
今回は nvm で Node.js を入れて使用した
コンソールにて
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
$ source ~/.bashrc
nvm コマンドが実行できればOK
次に npm (Node.js) をインストール
nvm ls-remote から好きなバージョンを選択する
$ nvm install v○○.○○.○○
$ nvm use v○○.○○.○○
$ node --version
> v○○.○○.○○
なお、公式によるとバージョンによっては互換性の問題がある模様
以降の手順は公式サイトの導入ページに記載されているので、すぐにできるはずだ。
3.1 Zenn CLI のインストール
任意の場所に作業用ディレクトリを作成し、
$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入
これだけで、作業環境の構築は終わり
4 Zenn CLI を使ってみる
$ npx zenn help
Command:
zenn init コンテンツ管理用のディレクトリを作成. 初回のみ実行
zenn preview コンテンツをブラウザでプレビュー
zenn new:article 新しい記事を追加
zenn new:book 新しい本を追加
zenn -v zenn-cliのバージョンを表示
zenn help ヘルプ
👇詳細
https://zenn.dev/zenn/articles/zenn-cli-guide
4.0 初回実行時のコマンド
$ npx zenn init
4.1 articles について
article は Qiita の記事にかなり近い存在であり、md ファイルに記述することで記事を作る
記事一枚と、一つの md ファイルが対応している
.
└─ articles
├── example-article1.md
└── example-article2.md
4.1.0 記事を作成する
| オプション | 内容 |
|---|---|
--slug |
記事のファイル名・リンクを引数で指定（「a~z」「0~9」「-」で 12~50字) |
--title |
タイトルを指定（tech: 技術記事 / idea: アイデア） |
--type |
記事のジャンル指定 |
--emoji |
絵文字を指定 |
slugオプションを使わないとファイル名がランダム生成となってしまい、ファイル管理が大変になるので要注意
実行すると、以下の内容が書かれたテンプレートが出現する
文書のJson形式のヘッダーで認識しているようだ
$ ---
title: "テスト"
emoji: "🖥" # 記事に付ける絵文字の指定（一つのみ）
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [""] # ["a", "b", ...] の形式で書く
published: false # true: 公開 / false: 非公開
---
4.2 本 について
├─ articles
└─ books
└── 本のスラッグ
├── config.yaml # 本の設定
├── cover.png # カバー画像（JPEGかPNG）
└── チャプターのスラッグ.md # 各チャプター
articles と同様にコマンド一つで本は作成できる
本では config.yaml が生成され、そこで順番等を管理する
chaptersの項目を書かずにファイル名を 1.<任意の名前>.md 2.<任意の名前>.md のようにすれば、その数字順に並んでくれるのでローカルでのファイル順を気にする人にも優しい作りになっている
title: "本のタイトル"
summary: "本の紹介文"
topics: ["zenn"] # トピック（5つまで）
published: true # falseだと下書き
price: 0 # 有料の場合200〜5000
chapters:
- example1 # チャプター1
- example2 # チャプター2
- example3 # チャプター3
toc_depth: 0
プレビューを表示
localhost としてサーバを起動すれば、こんな感じのプレビューが見えるようになる
md ファイルを保存するたびに自動でビューが更新されるし、間違っていることがあれば警告してくれる
ローカル開発も特に手間もなく始められるのでスゴい便利
Zenn のマイページで指定したブランチに push するだけで記事も自動更新してくれる
published の値を変更すれば、マイページにアクセスすることなく公開できるのもポイントが高い
Qiita のようにブラウザを開かなくても作業できるので更新頻度を上げれそう
今後は Zenn への移行も考えているので、よかったら見ていってください ( リンク )
