GitHubリポジトリ連携を通して感じたZennの良さ
ZennのGitHubリポジトリ連携を試してみた
ZennはGitHubリポジトリと連携して記事の管理を行うことができます。
ZennとGitHubリポジトリを連携すると、ローカルの好きなエディターで投稿コンテンツの作成・編集ができるようになります。
git管理＆自動デプロイ
連携後は投稿コンテンツの作成・更新をすべてリポジトリ内で行うことになります。ローカルで記事を書いて対象ブランチに変更をプッシュすると、Zennへ自動的にデプロイされるといった仕組みになっています。
連携手順は、Zenn公式の解説記事を見ればサクッと済みます。
CLIツールも充実
また、ローカルでの執筆時、スムーズにマークダウンファイルの作成をしたりコンテンツをプレビューすることができる「Zenn CLI」というNode.js製のツールも用意されています。
こちらもZenn公式の解説記事がありますので、サクッと導入しちゃいましょう。Node.jsがインストールされた環境であれば、MacでもWindowsでも同じ手順で導入できました。
執筆時によく使うコマンドだけ、ここにメモしておきます。
記事のmdファイル作成コマンド
以下コマンドで新規記事のmdファイルが生成されます。
$ npx zenn new:article
作成されるmdファイル名は、ユニークなスラッグIDが割り振られます。
ファイル内の先頭には、タイトルやトピック等のメタ情報が入ります。
---
title: "" # 記事のタイトル
emoji: "🌟" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [] # トピックス（タグ）["markdown", "rust", "aws"]のように指定する
published: false # 公開設定（falseにすると下書き）
---
ここから本文を書く
記事のプレビューコマンド
以下コマンドを叩くとlocalhostで記事のブラウザプレビューできます。
$ npx zenn preview
記事ファイルの変更内容がホットリロードで即時反映されるので、プレビュー画面を見ながらの執筆も快適です。
記事ファイルはマークダウン形式ですので、VSCode等であればマークダウンプレビューを使うことでエディタ単独で編集ファイルとプレビュー表示を左右に並べることも可能です。
画像について
GitHub連携時の画像挿入に関しては、Zennダッシュボードの画像アップロード機能を使う必要があります。
こちらに画像をアップして、記事内で使用する画像URLの含まれたタグをコピーします。
残念ながらこの画面でアップした画像URLは、画面を切り替えてしまうと辿れなくなってしまうようです。
すでにZenn上にアップした記事やスラッグ内の画像URLであればそのまま使えます。僕はスクラップに作業ログとして画像をアップしながらメモしているので、記事化する際はスクラップから画像を引っ張ってくるという形で対応しています。
あとから必要になる画像もスクラップに貼り付けてしまえば、画像を再アップせずコピペできますし作業内容との紐付けもできますからね。
埋め込み系のタグについて
こちらも画像と同じく、ローカルのエディタのみでの対応がやや難しいです。
ZennのMarkdown記法を完全に覚え切れていないので、適当なスクラップ投稿で埋め込みエディタのダイアログを開いて、そこからタグ生成してコピペする方法で対処しています。
タグの基本構成としては、サービス名にURLやKey、IDを組み合わせたもになっているので、ある程度書き慣れたらノールックでいけるかもですね。
まとめ
こんな感じでZennとGitHubリポジトリを連携させて、何本か記事を書いております。後半に記載したようなローカルのみで完結しない作業が一部あるものの、いまのところ概ね快適です。
なんといってもWeb上で途中まで書いていた記事が吹っ飛ぶといった不慮の事故が減るのは大きなメリットです。心配ならこまめにgitコミットしておけば、バックアップ体制も抜かり無いでしょう。切り戻しやブランチ切ってレビュー＆プルリクマージなどもできますからね。
もちろん他サービスでも自分でコンテンツ管理すれば似たようなことは可能ですが、サービス自体に連携機能が組み込まれているのは非常にありがたいです。
Zennはいいぞ
ローカルで好きなテキストエディタを使って記事を書けるだけでなく、様々な可能性を感じさせてくれるのがZenn&GitHub連携の魅力ですね。
例えばリポジトリを共有して、複数人による記事の共同編集や本の執筆を行なったり「CIツールを噛ませた投稿連携などもできそうだなぁ」といった、エンジニアの創意工夫の見せ所が溢れるようなサービスではないかと感じています。
Zennのサービス全体に言えることですが、見かけだけではないサービス面の工夫が随所に見られる点がエンジニアの心を掴むポイントなのかなと思いました。
Discussion
すいません。過去にオンラインエディタで投稿していて途中からGithub連携させた場合、過去の記事は手動でレポジトリに追加すると投稿がダブったりしないのでしょうか？
オンライン上で公開されている記事と同一スラッグIDのmdファイルを用意し、内容コピペでプッシュすればいけるのではないかと思います。
不安であれば公式に問い合わせていただくのが確実かと。
ありがとうございます。それでやってみます。