Zenn cliの導入と、過去記事をGitHub連携した話
はじめに
これまでZennのオンラインエディタを用いて記事を書いていたが、Zenn cliという便利そうなものがあることを知ったので(先に教えてくれよ)、そちらに環境を移行したときのメモ。
参照した記事が色々ばらついていたため、ここで纏めておく。
GitHub連携まで
公式記事を参照する。
- GitHubのレポジトリを作成する。
空のレポジトリを一つ準備する。PublicでもPrivateでもいいらしい。
- GitHub連携を行う
ここのリンクから連携ページに飛べる(マイページ→GitHub連携でもよいはず)。
"リポジトリを連携する"を選択し、"Only select repositories"を選んで先程作ったレポジトリを登録する。
Zenn cliの準備
つぎはこの記事を参照。
-
Node.js 14以上のダウンロード
-
Zenn記事を保存しておきたいディレクトリに、先程のGitHubレポジトリをcloneする
$ git clone git@github.com:your-repository
- クローンしたディレクトリへ移動し、zenn-cliのインストールをする
$ npm init --yes
$ npm install zenn-cli
- Zenn cliのセットアップ
$ npx zenn init
これで以下のようなディレクトリが作成される。
your-repository
├── README.md
├── articles
├── books
├── node_modules
├── package-lock.json
└── package.json
過去記事のダウンロード
ここを参照する。
- 過去記事をエクスポート
このリンクから記事/本/スクラップをエクスポートできる。
- .mdファイルをzenn用のディレクトリへと移動する
記事と本は以下のようにすればよい。
$ mv exported-zenn-files/articles/* your-repository/articles
$ mv exported-zenn-files/books/* your-repository/books
スクラップはファイルが自動で作成されていないため,自分で作ってあげる必要がある(デプロイはされないためあくまでローカルに保存するのみではある)。
$ mkdir your-repository/scraps
$ mv exported-zenn-files/scraps/* your-repository/scraps
あとはこの記事をGitHubにpushしてあげれば自動でデプロイしてくれる。
Zenn cliの使い方
記事作成
ここを参照する。
- 新規記事の作成
$ npx zenn new:article
でも作成できるが、スラグがランダムな文字列になってしまう。以下のようなオプションで指定できるため活用していきたい。個人的には、現在の作業環境だと絵文字が打ちずらいためここで指定してあげるとよさそう。
$ npx zenn new:article --slug your-slug --title your-title --type idea --emoji ✨
- 記事編集
上のコマンドで対応するディレクトリ以下に.mdファイルが作成されているから、あとは好きなエディタで編集する。
プレビュー
$ npx zenn preview
でlocalhost:8000でプレビューが立ち上がる。
画像のアップロード
画像のアップロードページでリンクを取得できる
削除
記事削除はZennのダッシュボードからしかできないため注意。
感想
好きなエディタでmdを書けるためとても便利。
僕にZennをお勧めした人へ、先にこっちのこと教えてくださいよ。
以上!
Discussion