Zennの立ち上げ方

Zennを立ち上げるためにしてきたこと

まずは、zennと連携するためのgithubにリポジトリを新しく作成しました。
私の場合は、zennというリポジトリを作成し専用にしました。

設定はprivateでもちゃんと連携できるので、問題ないなかったです。

なんでもいいので、ローカルのZennの記事を書き溜める用のディレクトリを作成します。

僕の場合は、Zennにしました。

Zenn　CLIをインストール

Zenn CLIをインストールするために、作成したディレクトリに移動してください。

cursorエディタや、vscodeエディタを開き
ターミナルを開いておいてください。

ターミナル上でZenn CLIをインストールします。

コマンド

$ npm init --yes
$ npm install zenn-cli

これで最新のZenn-CLIがインストールできます。

Zennを初期化設定

初期化するために下記のコマンドを実行します。

$ npx zenn init

アップデートについて

インストール後にターミナル上にupdateしてくださいと警告が出ることがあります。
親切に方法も教えてくれるのですが、下記のコマンドが表示されるので、それを実行してアップデートをしてください。

npx install zenn-cli@latest

ここまで、できたら記事の作成ができるようになります。
次にリポジトリと連携しましょう

Zennと作成したリポジトリと連携する

黄色の縁のところを選択すると、github連携のページに移動することができます。

リポジトリ設定をクリックして設定しましょう。

記事を書いてみよう。

初期化した時点で、必要なフォルダができあがった状態になります。

記事を保管するディレクトリはarticlesです。
記事を作成するためのコマンドを入力すると、articles内にファイルが作成されます。

記事を作成してみましょう

$ npx zenn new:article

これで記事のテンプレが作成することができます。

---
title: ""
emoji: "👌"
type: "" # tech: 技術記事 / idea: アイデア
topics: []
published: false
---

上記のような形になって作成されます。
形式は.mdでマークダウン形式です。

もう最初から、titleやemoji、typeなどを最初から入れておくこともできます。

slugを最初していないので、なんの意味も持たない文字列のファイルになってしまうのと、あとから変更ができない（idとなっている）ため、最初にslugを指定することをお勧めします。

$ npx zenn new:article --title zennの記事 --slug zenn_note --emoji 🏎️ --type idea

topicsはコマンドで入力できないので、後から入力しましょう
入力形式は[react,typescript,zenn]のように配列の形式で入力しましょう。
文字に,（カンマ）を間に入力してください。