📝

Zennの執筆環境

2023/03/26に公開

はじめに

当社ではZenn Publication上で技術ブログを始めることにしました。

https://zenn.dev/robon/articles/81001d16997717

ということで、Zennに記事を書く環境を作ってみたという(よくある)記事の2023年3月版です。(github.devに関して2023/12/20更新しました。)

やったこと

普通にZennのエディタでいいんじゃない?

結論から言うと、十分だと思います。(しゅーりょー)

ただ、記事のバージョン管理はしておきたいなと思ったので、調べてみることにしました。
(なので、最新版が編集できれば十分な人は、Zennアカウント作るだけで執筆できます。)

GitHub 連携

できますね。書いてあるとおりに作業すれば良いです。

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

もちろん、GitHubのアカウントは必要ですね。

https://docs.github.com/ja/get-started/signing-up-for-github/signing-up-for-a-new-github-account

私は、2013年に作って放置してあった遺跡を発掘して再利用することにしました。
(遺跡の既存リポジトリを消去するには、Settingsメニューから、最下層のDanger Zoneに侵入しなければならないことを学びました)

リポジトリ名は、紹介記事内の画像にも揺れがありますが、zenn-contentとかzenn-docsとかなんでも良いです。

Zenn Publicationが無い頃の記事では、社内で共有リポジトリを運用して、プルリクして公開するようなフローが紹介されていたりしますが、Publicationで未公開記事の参照も可能ですし、「ブログは個人の資産です」というコンセプトなので、リポジトリも個人管理にします。
(一個人がgithubの無料アカウントを複数持つことができない問題もあって、プラットホームの選定時に躊躇していたのですが、Publicationのおかげで綺麗に解決できました)

まだ試していませんが、有償のコンテンツをprivateなリポジトリで執筆する場合など、二つのリポジトリから連携することもできるようです。

ローカル編集

リポジトリの中身を作ります。まず、

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

して、

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

すればできるので、やるだけです。

npmがインハウスリポジトリ(当社の場合はCodeArtifact)を見ている場合、不要であれば外しておきましょう。(当社の場合は、/.npmrcをクリアする)

また、会社の開発環境とgitの情報が異なると思いますので、会社の開発環境のgitの情報を正として、このリポジトリの情報だけ書き換えておきましょう。

$ cd zenn-docs
$ git init
$ git config --local user.name "YOUR Name"
$ git config --local user.email ■■.■■@gmail.com
$ git remote add origin https://github.com/■■■■/zenn-docs.git

github認証は、VSCodeでやったので、VSCodeがイイ感じにやってくれました。

私の会社の開発環境の場合は、gitがデフォルトで作るブランチがmasterで、Zenn側のデフォルトのブランチがmainだったため、連携できないじゃん。となりましたので、連携できなかった人はブランチ名を確認してみてください。

これでいいんです。いいんですが、コマンドいろいろ覚えるの大変かなぁ。とか、開発環境でも手軽に書ける半面、上のように干渉しないか?いろいろ気を遣うのは大変かも。とか。

github.dev で執筆

なるほどね。

https://zenn.dev/zenn/articles/usage-github-dev

素敵です。ありがとうございます。

ここで書くのが良いのかどうかわかりませんが、

  • Chromeでエラーが発生してプレビューできない(Web ビューの読み込みエラー:Error Could not register service workers...) 本日(2023/12/20)確認したところ大丈夫でした。ありがとう。偉い人。
    • EdgeとFirefoxは、今のところ元気に動いています。
    • Chromeは、当社の場合は開発環境の一部でもあるので、これはこれで良いか。
  • プレビューが更新されるタイミングが直感と異なる これも動くようになった Chrome だと大丈夫かもしれない。ありがとう。偉い人。
    • .mdファイルを更新してプレビューでは反映されなくて、Zennパネルの「記事一覧を更新」アイコンをクリックした後でプレビューします。

まとめ

当面は Edge Chrome上のgithub.devをZennの執筆環境にしていこうと思います。

GitHubで編集を提案
株式会社ROBONの技術ブログ

Discussion