ZennとGitHubを連携させて、WordPressにも自動反映させてみた

おはようございます。YASUです。

昨日、TypeScriptのHello World記事を書き終えたところで、「これ、毎回ブラウザからコピペで投稿するの面倒じゃないか」と思い立ちました。調べてみると、Zennという技術記事サイトには、GitHubのリポジトリと連携して、プッシュするだけで記事が自動公開される仕組みがあるらしいので、今日はそれを一気に設定してみました。

結論

Zennというサイトに、技術的な学びを記事にして残せる仕組みを作りました。コミット・プッシュするだけで公開される形にしたので、今後は「動くものを作った→記事にする」までの手間がぐっと減りました。

Zennって何?

簡単に言うと、エンジニア向けの技術記事投稿サイトです。プログラミングやAWSの学習ログを書くのに、ちょうどいい場所を探していました。Googleアカウントですぐにログインできて、ユーザー名以外は後からいつでも変更できるので、気軽に始められました。

GitHubと連携する

Zennには「GitHub連携」という機能があって、これを使うと、パソコンの中で記事のファイルを作って`git push`するだけで、自動的にZenn側にも記事が公開されます。設定の際、GitHub側で「どのリポジトリまでアクセスを許可するか」を選ぶ画面が出てきました。

ここでは、全部のリポジトリに許可を出すのではなく、Zenn専用に新しく作ったリポジトリだけを選びました。関係ないリポジトリにまでアクセス権を広げる必要はないので、これは基本のマナーだと思います。

実際に記事を書いてみる

ローカル側の準備は、こんな感じでした。

npm init -y
npm install zenn-cli --save-dev
npx zenn init
npx zenn new:article --slug 記事の名前

これで、記事のひな形(Markdownファイル)が自動で作られます。タイトルや公開設定を先頭に書いて、本文を書いていくだけ。ローカルでプレビューも確認できるので、実際にZennでどう見えるか、公開前にチェックできるのも安心でした。

公開する

記事ができたら、公開設定を「true」に変えて、いつも通りコミット・プッシュするだけです。

git add .
git commit -m "記事を追加"
git push origin main

プッシュ後、数分待つと、実際にZenn上に記事が公開されていました。これまで何度もやってきた「編集して、プッシュして、サイトに反映される」という流れが、Zennでもそのまま使えたのは嬉しい発見でした。

ちょっとハマったポイント

初回のプッシュで、認証のエラーが出ました。ただ、以前ポートフォリオサイト用に作っておいたSSH鍵がそのまま使えたので、接続先の設定をSSH形式に変えるだけで解決しました。一度作った鍵は、別のプロジェクトでも使い回せる、というのは地味に助かるポイントでした。

WordPressにも記事一覧を表示してみた

最後に、Zennに書いた記事の一覧を、このブログにも表示できないか試してみました。Zennにはユーザーごとに専用のRSSという仕組みがあって、そのURLをWordPressの「RSS」ブロックに貼るだけで、記事タイトルの一覧を表示できます。

ただ実際にやってみると、これは「別のページに、一覧として表示される」仕組みで、いつものブログ記事一覧に混ざって表示されるわけではない、ということが分かりました。ここは、思っていたイメージと少し違ったので、今後の課題として残しています。

今日の学び

まとめ

技術記事を書く場所を整理できたので、今後の発信がしやすくなりそうです。RSS表示の仕組みは思っていた形と少し違いましたが、それも含めて今日の収穫にしておきます。

それでは、また次の記事で。