Zenn
📕

（今さら）Zenn記事のGithub連携

に公開
Zenn
idea

初めに

本当に今さらですが、Zennの記事をGitHub連携で管理するようにしました。これまでブラウザのZenn上のエディタで記事を書いたり、管理したりしていましたが、好きなエディタを使うことでAIも活用しやすくなるため、切り替えることにしました。Zenn公式が必要な情報を公開してくれているので、非常に簡単だったのですが、新しい管理方法でまずは1記事を書く練習と思って、書かせていただきます。

リポジトリ作成 & GitHubと連携しよう

https://zenn.dev/zenn/articles/connect-to-github
基本的には上記の記事を読めばOKです。
GitHubのどのリポジトリ、どのブランチが変更された場合に、Zennにデプロイされている内容を更新するかを設定できます。

作成したリポジトリをcloneしてローカルリポジトリを作成しよう

1つ前のGitHub連携の際に、空のリモートリポジトリを作成し、Zennと連携しているはずです。
そのリポジトリをgit cloneして、ローカルリポジトリを作成しましょう。

Zenn CLIをインストール & プロジェクトの初期化

https://zenn.dev/zenn/articles/install-zenn-cli
これも上記の記事の通りです。
この手順で、CLIをインストールし、Zenn記事管理のためのディレクトリ構成が出来上がります。

既に作成済みの記事をGitHub連携に移行する

https://zenn.dev/zenn/articles/setup-zenn-github-with-export
これも上記の記事の通り、既存の記事もエクスポート可能で、エクスポートしたファイルをarticlesディレクトリに移せば、ほぼ移行完了です（あとはpushするだけです）。

コードをコミット & プッシュしてみよう

今までの変更点をデプロイ対象のブランチにコミット&プッシュしてZennへのデプロイが正常に反映されてそうかを確認してみましょう。
GitHub連携が完了すると、画面右上に検索とベルマークの間にデプロイページに遷移できるボタンが追加されるので、それをクリックすると下図のようなページに遷移します。

Zennでの記事の書き方・編集

https://zenn.dev/zenn/articles/zenn-cli-guide
基本的な記事の書き方やプレビューの方法などが上記の記事に記載されています。
ただ、次に紹介するVSCode拡張を用いた方が簡単に書けそうだったので、そちらも紹介します。

VSCode拡張

https://zenn.dev/negokaz/articles/aa4e12b76d516597a00e
上記の記事に記載の拡張機能をVSCodeに入れてみました（こちらは非公式の拡張機能のようです）。
できることは上記記事にある通り、主に以下があります。

  • 編集中の投稿コンテンツをプレビュー
  • 投稿コンテンツの一覧表示
  • 画像アップロードページを開く
  • 投稿コンテンツの作成

通常のCLIを活用してできることもありますが、できる限りVSCode上でGUIで分かりやすく色々できるのが非常に良いと思いました。
個人的に一番良いと思ったのは、どのファイルがどの記事なのかエディタ上で分かりやすくなる「投稿コンテンツの一覧表示」です。
各記事にはslugという一意に決まる値があり、既存の記事をエクスポートしたファイルもslugの値.mdという形式で保存されるため、ぱっと見ではどのファイルがどの記事か分かりません。
下図の上部がslugが入ったファイル名ですが、下部では拡張機能によりタイトル名が表示され、タイトル名をクリックすることで編集可能になるので、非常に便利でした。

画像のアップロード

画像を記事に入れる際のアップロード方法には以下2つがありそうです。

  • Zennサイト上で画像アップロード
  • ローカルの画像をリポジトリにpushして反映

Zennサイト上で画像アップロード

この記事ではこちらの方法を取りました。
アップロードページへのリンク
上記のアップロードページに遷移して、画像をアップロード→作成されたURLをmdファイルに貼り付けることで、画像を表示することができます。

ローカルの画像をリポジトリにpushして反映

各記事に対する画像もきちんとGitで管理したい人向けの方法でしょう。
https://zenn.dev/zenn/articles/deploy-github-images
上記の記事にあるようにimagesディレクトリに画像を配置してpushすることでアップロードでき、記事のmdファイルでは、そのファイルを絶対パスで指定すれば表示されます。

Zennのマークダウン記法

今まで通りマークダウン記法で記事を書いていくのですが、マークダウンに対してどのような表示になるかは以下記事をご確認ください。
https://zenn.dev/zenn/articles/markdown-guide

（余談）記事執筆にAIの活用

自分はAIエディタのCursorを使っており、本当に簡単にですが、添削してもらいました。

今回は誤字・脱字の修正程度の依頼ですが、自由なエディタで記事が書けるようになったことで、AIを活用しやすくなって非常に助かりました。
なるべく記事執筆も自分らしさを出しつつ、AIによって効率化をしていけたらなと思っています。

最後に

公式の記事を読めば、ほぼほぼ解決できる内容ではありますが、参考になった人がいれば幸いです。
簡単にローカルエディタで記事を書けるように整備してくれたZenn運営と、便利な拡張機能を作ってくれた方に感謝です。

GitHubで編集を提案

Discussion