Zennの記事をGitHubで管理できるようにしたったりました
おいどん。と名乗ってます〜
アウトプットを加速させようという私個人の勝手な取り組みを加速させるために、ZennをGitHubで管理できるようにしたログです。
記事にするほどでもないかな〜とも思いましたが、以下の動画を見たので行動に移そうと思います。
また、現在vimmerになろうとvimキーバインド絶賛練習中なので、tmux × vim でこの記事を書いています。
markdownなのでそこまで操作が複雑ではなく、vimの練習に最適だと感じています。
それでは内容に入っていきます。
TL;DR
- Zenn記事をGitHub管理する方法を一連の流れに沿って書いてます。
手順
- Zenn用のGitHubリポジトリを用意する
- ZennとGitHubリポジトリを連携する
- Zenn CLIをインストールする
- コンテンツを作成する
Zenn用のGitHubリポジトリを用意する
⭐これからnpmの初期化などするので、予めリポジトリを用意した方が楽ですよ
今回はGitHub CLIでやったので、その手順を記していきます。
リポジトリを作成したいフォルダに移動
$ cd repositories
※各自のディレクトリに応じて変えて下さい
リポジトリを作成
$ gh repo create zenn-github --private # or public
リポジトリをクローン
$ gh repo clone username/zenn-github
※usernameのところは各自のusername
ZennとGitHubリポジトリを連携する
こちらのGitHub連携ページから連携ができます。以下にZenn公式の記事があるのでそちら参考にやってみて下さい。
参考ページ
Zenn CLIをインストールする
以下にZenn公式の記事があるので詳しくはこちら
リポジトリのあるディレクトリに移動する
$ cd zenn-github
初期化
$ npm init -y
移動したリポジトリ内で初期化し、package.jsonを作成する
-yを付けることで、面倒な質問項目をすべて"Yes"で切り抜けられる
Zenn cliをインストール
$ npm install zenn-cli
package.jsonのdependenciesに以下が追加される
"dependencies": {
"zenn-cli": "^0.1.***"
}
Zennのセットアップ
$ npx zenn init
Zenn CLIの設定は終了
※CLIのアップデート
$ npm install zenn-cli@latest
コンテンツを作成する
詳細は以下のページから
記事の作成
$ npx zenn new:article
articlesフォルダ内にatgau9ega.mdみたいなファイルが生成される
プレビュー
$ npx zenn preview
デフォルトでlocalhost:8000でプレビューを見れます
記事の公開
articlesフォルダの[slug].md内にあるpublishedプロパティをtrueにし、プッシュする
記事の更新
.mdファイルを更新し、プッシュする
おわりに
より詳細な手順はZenn公式の記事に記載があるので、そちらを御覧ください
アウトプット習慣化の第一歩です！
Discussion