zenn セットアップ

# はじめに

zenn を使っていこうと思い、セットアップを行いました。徐々に用意していく、というのがいつものおじさんのスタイルなのですが、今回はガイドにしたがって、一気に行いました。

ざっくり読んでいてzenn が良さそうだと思ったのは、ずばり

- github と連携して自動で deploy してくれるところ

です。Qiita でもできるのなら、ごめんなさい。Qiita には、これまで通り、実装に際して必要なTips を書いていきます。


### Github repository との連携

ここに書いてある通りでした。

https://zenn.dev/zenn/articles/connect-to-github

おじさんは、まずGithub に private な repository を新規作成しました。そして、zenn の設定ページにある「Github との連携」を押し、Github のページの飛んで 新規作成したrepository を選択して連携させました。特に問題はありませんでした。

なお、Zenn で管理するrepository はどんな感じになるの？という例がこちらです。

https://github.com/zenn-dev/zenn-docs

### Zenn CLI のセットアップ

次に、ローカルでの作業環境を整えます。CUIツールが用意されています。言われたとおりに行いました。

https://zenn.dev/zenn/articles/install-zenn-cli

上記zenn の公式ガイドでは、下記を実行するように言っています。

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

npm のupdate はコマンド実行時に示唆されたものを素直に実行しました。また、```npm init``` で作られた package.json を入れておきます。

```
$ npm install -g npm@9.6.3
$ git branch -b dev/init
$ ls
node_modules  package-lock.json  package.json
$ git add package.json package-lock.json
```

続いて、設定ファイルをnpx で用意します。便利だなぁー。

```
$ npx zenn init


  🎉  Done!
  早速コンテンツを作成しましょう

  👇  新しい記事を作成する
  $ zenn new:article

  👇  新しい本を作成する
  $ zenn new:book

  👇  投稿をプレビューする
  $ zenn preview
  ```

こんな感じになっています。

  ```
  $ tree
.
├── README.md
├── articles
├── books
├── node_modules
│   └── zenn-cli
│       ├── LICENSE
│       ├── README.md
│       ├── dist
│       │   ├── client
│       │   │   ├── assets
│       │   │   │   ├── index-1912a68d.js
│       │   │   │   ├── index-50cfb215.css
│       │   │   │   └── index-deabac55.js
│       │   │   ├── favicon.png
│       │   │   ├── index.html
│       │   │   ├── logo.svg
│       │   │   └── static-images
│       │   │       ├── book-cover.png
│       │   │       ├── folder-close.svg
│       │   │       └── folder-open.svg
│       │   └── server
│       │       ├── zenn.js
│       │       └── zenn.js.LICENSE.txt
│       └── package.json
├── package-lock.json
└── package.json
```

いざ、preview してみます。

```
$ npx zenn preview
👀 Preview: http://localhost:8000
```

すごいなー。

![zenn_preview2023-04-02 150134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/2b506491-80cb-8f8f-e499-c2838b0eebc2.png)


### 記事を書いて、非公開で保存する

記事を書きます。ファイル名は自動生成されるランダムな文字列になります。slug と呼ばれ、指定することもできるようですが、まぁ良いでしょう。

```
$ npx zenn new:article
```

```
$ cat articles/13ea7e11a038c5.md
---
title: ""
emoji: "🐕"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["statistics","hypergeometric distribution"]
published: false
---
```

ここで published が　false になっているので、これをzenn のサイトのおいても公開されないはずです。
ということで、push しました。

もろもろgit add、git commit して、git push しました。

```
$ git commit -m "init article"
$ git push origin dev/init
```

ここでgithub のほうで main に merge しようとしましたが、私、bare repository で main branch がない状態だったので、このdev/init が default のbranch になってしまいました。その結果、そのまま　zenn のページで更新が反映されていました。

![zenn_dashboard2023-04-02 153556.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/4744dc4f-d848-feec-81c6-38c945391eab.png)

Github でdefault の branch を変更して良しとしました。

### 公開まで

おそらく

- ローカルでmarkdown ファイルを書いて、npx zenn preview する
- Github repository で同期する
- Github repository でPR出して main に mergeする

という流れで、ローカル、Gihutb, Zenn のサイトで同期されるのだと思います。
公開にするには、article のページで "published" を true にすれば良いのだと思いますが、まだ試していません。^^;

### 新しいversion に更新

```npx zenn new:article```しようとしたら、

```
   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │   新しいバージョンがリリースされています: 0.1.141 → 0.1.142      │
   │   npm install zenn-cli@latest で更新してください               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

npm notice Run npm install -g npm@9.6.5 to update!
```

というメッセージが出ました。丁寧にありがとうございます。
無事に更新できました。

# まとめ

とりあえず、zenn にアカウントを作って、チュートリアルに従い環境を作れました。
これから、統計検定の勉強はzenn の方に書いていきたいと思います。

ふー。日曜日の昼下がり。ひとりぽちぽちＰＣをたたくおじさん。これから走ってこよう。
(2023/04/02)

###

- 新しいversion に更新を追記(2023/04/23)

<!--
git branch -m dev/init dev/ini
git fetch origin
git branch -u origin/dev/ini dev/ini
git remote set-head origin -a
-->