Zenn
🐥

ZennにHello World

2023/03/14に公開
Git
GitHub
Google Analytics
VS Code
Zenn
idea

Zennをはじめてみた

ちょうど今年はアウトプットを意識しようとしていた中，Zennが気になっていた．
そこで，Zennを始めるにあたって参考になった記事，Zennに投稿していく上での手順をまとめていきます．

主に以下の状況を想定し，必要なセットアップを行います．

  • 執筆環境
    • mac
    • VSCode
    • GitHub
    • Google Analytics
  • 筆者(≒対象読者)
    • CV系の大学院生
  • 投稿する予定のコンテンツ
    • 環境構築系（たとえばこの記事）
    • 調査した論文のまとめ
    • 本で学習した内容のまとめ，自身の研究への応用
    • 研究内容の紹介（権利的な問題がなければ）
    • 趣味で作ったプログラムの紹介

Zennを選んだ理由

これまで技術的な知見や開発記録は，個人のScrapBox上と研究室のwikiに管理してきた．
今年はそれに加え，積極的なアウトプットを意識して，人に読まれる文章を習慣づけたいと考えた．

そこで，プラットフォームとしてQiita & GitHubを想定していたが，最近，Zennで記事を読む機会が増え，調べてみた．

すると，以下の記事，特に「Qiitaとの比較」から，自分が投稿予定のコンテンツには，ZennのIdeaがベストマッチだと感じた．
僕がZennを選んだ理由

Zennアカウントのセットアップ

アカウント作成自体は容易で，Googleアカウントに紐付けるだけだった．
表示名や自己紹介は今後いろいろな記事を読みながら修正すれば良いかな，と，とりあえず無難なものに．

Profileの設定

https://zenn.dev/settings/profile から，GitHubアカウントの紐付けを行いました．Twitterはギークな発信は全くしてないので紐付けず．
ウェブサイトは今後投稿する記事の特性を見て，研究室のマイページを紐付けようかな，と考えています．(本名をいきなり露骨に晒すのは抵抗があった)

Settings

有料バッジを受け取る，メール通知のニュースレターを解除．
Google Analyticsの設定も行いました．あまり使い慣れていませんでしたが，以下の記事を参考にして，簡単にセットアップができました．
ZennのGoogle Analytics(GA4)トラッキングID設定方法

執筆環境の構築

VSCodeのヘビーユーザーなので，VSCode上で記事執筆ができることは，Zennを選んだ大きな利点の一つでした．
また，昨年度からGit管理を意識しているので，Zennでも継続していきたいと思います．

そこで，VSCode上で執筆し，GitHubを介して記事を投稿する環境を整えました．

Zenn CLIのインストール

まず，ローカル環境での執筆のためにZenn CLIをインストールします．
公式ドキュメントに従い，簡単にインストールが可能です．
Zenn CLIをインストールする
Zenn CLIは2023/03/14時点で最新のLTSである18.15.0をインストールしました．
Zennコンテンツを管理するディレクトリはGoogleDrive上に作成しました．
これにより，mac mini, macbook pro, と異なる環境からでも執筆が可能です．

GitHubにアップロードするので，GoogleDrive上でやる必要はない気が...
日本語パスも入るので，あまり安心できませんね...

install_zenn_cli
# 管理ディレクトリをGoogleDrive上に作成
mkdir ~/GoogleDrive/Document/Zenn
cd ~/GoogleDrive/Document/Zenn
# 公式ドキュメントに従って環境構築
npm init --yes
npm install zenn-cli
npx zenn init

GitHubとの連携

公式ドキュメントに従い，GitHubとの連携設定を行いました．
GitHubリポジトリでZennのコンテンツを管理する
方針として，記事公開用のreleaseブランチと，各記事ごとにブランチを切る(ブランチ名は記事タイトルにする)ことを決めました．

まず，GitHubでリポジトリを作成します．
作成したリポジトリは，[Zenn CLIのインストール](#Zenn CLIのインストール)で作成した管理ディレクトリと紐付けます．

link_github
pwd  # ~/GoogleDrive/Document/Zenn
git init
git branch -m main release  # ブランチの初期値がmainなので変更
git add .gitignore
git add *  # Zenn CLIが生成したファイルを追加
git commit -m "First Commit"
# GitHubとの連携(リポジトリ作成後のQuick setupに従う)
git remote add origin https://github.com/musan6363/zenn.git
git push -u origin release

Zenn CLIで作成したファイルはGitHub上に反映されました．

続いてZennとの連携を行います．
https://zenn.dev/dashboard/deploys から連携を行います．
先程作成したリポジトリのreleaseブランチを連携しました．
https://zenn.dev/dashboard/deploys?tab=repo_settings を確認し，デプロイ対象ブランチが正しく反映されていることを確認しました．

記事の作成

記事の作成は公式ドキュメントにノウハウが詰まっています．
Zenn CLIで記事・本を管理する方法
よく使いそうなコマンドは以下のとおりです．

writing_command
# 新しい記事の作成
npx zenn new:article

# プレビュー開始
npx zenn preview

記事の公開はmdファイルの上部にあるyaml形式で書かれたオプションを，published: trueにして，連携したGitHubリポジトリにプッシュすることでデプロイされるそうです．

その他，記事の公開日時設定を変更する方法などが紹介されていました．

今後記事を書く上で，次のコミュニティガイドラインに注意する必要があります．それほど長くないので，定期的に読み返したいと思います．
コミュニティガイドライン | Zenn
特に自分は，個人的なメモにならないように，対象読者を想定(まずは自分と同じ界隈，CV系の大学院生・研究者)することを意識したいと思います．

むすび

mac上のローカルで編集することを意識したZennの環境構築についてまとめました．
これからZennを使って積極的なアウトプットを心がけようと思います．

GitHubで編集を提案

Discussion