Zennの記事を書くのもDevContainerでやるようにしてみる
Zennの記事を書くのもDevContainerでやるようにしてみる
概要
ZennをGithub連携で記事作成するようにして、その記事作成環境をDevContainerで構築する。
経緯
Qiitaで記事を書いてみていたが、そういえばQiitaってハードウェア系の話はあまり歓迎されないという話を思い出した・・・
【公式回答】Zennはハードウェア系の記事が投稿できる
で、色々調べてみるとZennがいいということで、Zennで記事を書くことにする。
僕がZennを選んだ理由
Zennを登録してプロフィールを設定しようとすると、記事の管理をGithubでできるらしい。
指定したブランチにプッシュすると、Zennに自動デプロイされる。
これは楽しそうだということで、Github連携で記事を書くことにし、せっかくなのでDevContainerを使うようにする。
やったこと
まずは、Zenn公式の記事を参考に、Githubのリポジトリを作成して、連携設定。
GitHubリポジトリでZennのコンテンツを管理する
特に迷う部分は無いはず。
連携できるリポジトリが2つまでというのは、一つはPublicリポジトリ、もう一つはPrivateリポジトリを想定しているのかな。
Publicリポジトリにすれば、公開記事に知らないところからプルリクが飛んでくる未来もありそう。
記事の手順で進めると、npmつかってZenn CLIを入れる手順になるが、その前にGithubからリポジトリをCloneする。
今回はDevContainerを前提としているので、今はnodeが使えないかと思うので、このタイミングでDevContainerを立ち上げる。
Cloneしたリポジトリのフォルダ内でVSCodeを起動。
$ code .
左下のリモートアイコンをクリックして、Add Development Configuration Files...を選択、言語はnodeを選んで.devcontainerを作成する。
.devcontainer配下にあるdevcontainer.jsonを編集する。
"postCreateCommand": "npm init --yes && npm install zenn-cli && npx zenn init",
postCreateCommandは、コンテナが起動したときに実行されるコマンドを入れる。
ここで公式に記載されているzennのインストールと初期化のコマンドを実行しています。
Zenn CLIをインストールする
次に、またリモートアイコンからReopen in containerを選択、言語はnodeを選んでコンテナ起動しましょう。
ここでnode_moduleフォルダが作成されるが、npx zenn initで自動生成される.gitignoreに指定されていて安心。
package.jsonとpackage-lock.jsonは特に管理する必要がない（コンテナ起動時にzenn initで毎回初期化される）ので、この環境でnode書いたりしないのであれば、これも.gitignoreに追加しておくと良い。
あとは公式の記事の書き方に従って執筆し、Githubへプッシュするだけです。
Zenn CLIで記事・本を管理する方法
まとめ
ZennはGithub連携で記事管理できていいゾ～これ。
DevContainerの設定ファイル（.devcontainerフォルダ以下）があっても問題なさそうです。
※コンテナ起動時にzennをインストールするように記述を修正しました。
Discussion