💫

Zennの記事をGitHubで管理できるようにしたったりました

2023/10/02に公開

おいどん。と名乗ってます〜

アウトプットを加速させようという私個人の勝手な取り組みを加速させるために、ZennをGitHubで管理できるようにしたログです。
記事にするほどでもないかな〜とも思いましたが、以下の動画を見たので行動に移そうと思います。
https://www.youtube.com/watch?v=NkShaeQZbgk

また、現在vimmerになろうとvimキーバインド絶賛練習中なので、tmux × vim でこの記事を書いています。

markdownなのでそこまで操作が複雑ではなく、vimの練習に最適だと感じています。

それでは内容に入っていきます。

TL;DR

  • Zenn記事をGitHub管理する方法を一連の流れに沿って書いてます。

手順

  1. Zenn用のGitHubリポジトリを用意する
  2. ZennとGitHubリポジトリを連携する
  3. Zenn CLIをインストールする
  4. コンテンツを作成する

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公式の記事があるので詳しくはこちら
https://zenn.dev/zenn/articles/install-zenn-cli

リポジトリのあるディレクトリに移動する

$ cd zenn-github

初期化

$ npm init -y

移動したリポジトリ内で初期化し、package.jsonを作成する
-yを付けることで、面倒な質問項目をすべて"Yes"で切り抜けられる

Zenn cliをインストール

$ npm install zenn-cli

package.jsondependenciesに以下が追加される

"dependencies": {
    "zenn-cli": "^0.1.***"
 }

Zennのセットアップ

$ npx zenn init

Zenn CLIの設定は終了

※CLIのアップデート

$ npm install zenn-cli@latest

コンテンツを作成する

詳細は以下のページから
https://zenn.dev/zenn/articles/zenn-cli-guide

記事の作成

$ npx zenn new:article

articlesフォルダ内にatgau9ega.mdみたいなファイルが生成される

プレビュー

$ npx zenn preview

デフォルトでlocalhost:8000でプレビューを見れます

記事の公開

articlesフォルダの[slug].md内にあるpublishedプロパティをtrueにし、プッシュする

記事の更新

.mdファイルを更新し、プッシュする

おわりに

より詳細な手順はZenn公式の記事に記載があるので、そちらを御覧ください
アウトプット習慣化の第一歩です!

Discussion