Zenn記事をGitHubと連携してみる

maroKanatani 2022/02/27

上記事の手順の通りに設定。

これも記事にある通りの手順。

$ git clone git@github.com:Kanatani28/zenn-content.git
$ cd zenn-content

# 手順1
$ npm init --yes
$ npm install zenn-cli

# 手順2
$ npx zenn init

# 手順3 別ポート指定
$ npx zenn preview --port 3333

maroKanatani 2022/02/27に更新

設定できたのでテストで下書き記事を投稿してみる。

これも記事の通り。

$ npx zenn new:article
# articles下に.mdファイルが作成される

以下のように編集する

articles/〇〇.md

---
title: "タイトル"
emoji: "🐥"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["test"]
published: false
---

GitHubに上げる。

$ git add articles/〇〇.md 
$ git commit -m"テスト実行"
$ git push

maroKanatani 2022/02/27に更新

投稿されないなーと思ったらブランチ名が違っていた。
Zennだとmain、GitHubだとmasterになっていた。
GitHubの方をmaster -> mainに変更する。

ここにちゃんと書いてあった。

maroKanatani 2022/02/27

本文がないとエラーになるので修正して再度コミット。

articles/〇〇.md

---
title: "タイトル"
emoji: "🐥"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["test"]
published: false
---

# テスト

maroKanatani 2022/02/27に更新

いい感じになった。

デプロイ画面

記事の管理画面

maroKanatani 2022/02/27

次に既存の記事があるのでそれも管理対象にする。

これも記事が用意されている。

エクスポートして記事をGitHubにPushする。
自分はとりあえず既に公開済みのものだけをチョイスしてPushした。

maroKanatani 2022/02/27

ここまでで連携自体は完了した。
公式が情報を提供してくれているのであまり迷わず設定できた。

GitHubと連携したことによりGitHub ActionsやGitHub Projectsなども使えそうなので
良い設定があればまたやってみる。