Zenn CLIを導入してみた備忘録
Zenn CLI を導入してみたのでその備忘録としての記事を残していきます。
前提条件
インストール
ディレクトリを作成し、その下で作業していきます。
mkdir zenn-blog
cd zenn-blog
pnpm コマンドで Zenn CLI をインストールします。
pnpm install zenn-cli
インストールできたら、CLI の初期設定をしていきます。
pnpm zenn init
実行すると、以下のように表示されます。
❯ pnpm zenn init
🎉 Done!
早速コンテンツを作成しましょう
👇 新しい記事を作成する
$ zenn new:article
👇 新しい本を作成する
$ zenn new:book
👇 投稿をプレビューする
$ zenn preview
作業ディレクトリの中に以下が作成されたと思います。
これでインストールは完了です。
- ./articles
- ./books
- .gitignore
- README.md
GitHub リポジトリを連携する
こちらの手順に従って連携していきます。
今回は以下のリポジトリを連携します。
公開済み記事の導入
すでに公開済みの記事はエクスポートして、articles ディレクトリ下に入れておけば管理することができるようです。
エクスポートは以下のリンクからできます。
ダウンロードボタンを押すと、zip ファイルをダウンロードできるようです。
ダウンロードした markdown ファイルをそのまま articles ディレクトリに配置します。
画像に関しては生のデータが zip 形式でエクスポートされるわけではなく、
Google Cloud Storage に保存されているデータをリンクで記事に配置してくれるようです。
articles に配置後、push します。
すると、自動で Zenn に連携してくれます。
これで、記事のエクスポートは完了です。
記事を書いてみる
新しい記事を作成してみます。以下のコマンドを実行します。
pnpm zenn new:article
すると、articles ディレクトリ下に新しい markdown ファイルが作成されます。
記事のプレビューをしてみます。
pnpm zenn preview
localhost:8000 にアクセスすると、以下のように記事のプレビューができます。
これで Zenn CLI を使って記事を作成できるようになりました。
記事の公開
記事ができたら公開していきます。
公開方法は簡単で、markdown ファイルの一番上にある
設定項目の一つ、published を false から true に変更するだけです。
この変更をリポジトリにプッシュすれば記事が公開されるはずです。
公開されました！
まとめ
これで Zenn CLI を使った記事の執筆ができるようになりました！
皆さんも Zenn CLI 使ってみてください！
備考
画像を作成する際は新しく/images ディレクトリ作成し、配置する必要があるらしいです。
それ以外のところから記事に画像を配置すると、エラーが起こります。
Discussion