zenn セットアップ

はじめに

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

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

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

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

Github repository との連携

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

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

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

Zenn CLI のセットアップ

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

上記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

すごいなー。

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

記事を書きます。ファイル名は自動生成されるランダムな文字列になります。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 のページで更新が反映されていました。

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)