🚀

ZennとGitHubを連携して記事を投稿してみた

2024/06/09に公開

 この記事は？Zenn と GitHub を連携してから初めての記事投稿です。

ブラウザから編集するのもいいんですが、GitHub で管理してエンジニアっぽさをアップしたい！！

皆さんも Zenn と GitHub を連携してみてくださいー！

 連携方法
 何ができる？Zenn と GitHub リポジトリを連携することで
リポジトリで管理しているコンテンツ（記事や本）を自動で投稿＆更新してくれる
ブラウザから作成した記事を GitHub に持ってこれる

Zenn CLIと組み合わせることで、ローカル環境でコンテンツを作成できる
コンテンツの削除はブラウザからのみ実行できます。

他のコンテンツデプロイ時に合わせて投稿されないよう、GitHub リポジトリからも削除しておきましょう！

 前提
GitHubとZennのアカウントがあるものとします

 ゴールZenn と連携した GitHub リポジトリにコミットすると、自動で記事を投稿＆更新する

 やることGitHub リポジトリを作成
Zenn と GitHub リポジトリを連携
GitHub リポジトリをクローン
ZennCLI のインストール
初期セットアップ

 GitHub リポジトリを作成ここから好きな名前のリポジトリを作成します。
Public, Private どちらでもよく、README.md もいりません
自分は、zenn-contentsというPrivate リポジトリを作成しました

 Zenn と GitHub リポジトリを連携Zennにアクセス＆ログインし、右上のアイコンをクリック。
GitHub からのデプロイをクリックします
リポジトリを連携する> 連携へ進むの順にクリックしていきます
Only select repositoriesをクリックし、Select repositories から先ほどのリポジトリを選択。
「Install ＆ Authorize」をクリックします。
仕様上、３つ以上のリポジトリを連携しようとすると失敗します。
GitHub 側でパスワードを求められたら入力して、「Confirm」
連携できると Zenn のダッシュボードでデプロイ履歴とリポジトリ設定が見れるようになります
手動デプロイや連携の解除もこの画面からできるんですね～

 GitHub リポジトリをクローンここからは GitHub リポジトリ内やローカル環境をととのえていきます。
先ほど作成した GitHub リポジトリをクローンします
git clone https://github.com/<username>/<repositry_name>.git

// 自分の場合
git clone https://github.com/hisuihisui/zenn-contents.git

 ZennCLI のインストールZenn CLI はNodejs 14 以上が必要なので、バージョンを確認しておきます
$ node -v
v18.17.1
// 18なのでOK
Node.js のインストール方法は ↓ をご覧ください
https://zenn.dev/kuuki/articles/windows-nodejs-install/
https://zenn.dev/kuuki/articles/ubuntu-install-lts-nodejs/
先ほどクローンしたリポジトリ配下に移動して Zenn CLI をインストールします
// リポジトリ配下に移動
$ cd zenn-contents/

// プロジェクトをデフォルト設定で初期化
$ npm init --yes
Wrote to /mnt/c/Users/*****/Desktop/development/blog/zenn-contents/package.json:

{
  "name": "zenn-contents",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

// Zenn CLIをこのディレクトリにインストール
$ npm install zenn-cli

added 1 package, and audited 2 packages in 990ms

found 0 vulnerabilities

 初期セットアップZenn CLI を使って初期セットアップをします
$ npx zenn init

  🎉  Done!
  早速コンテンツを作成しましょう

  👇  新しい記事を作成する
  $ npx zenn new:article

  👇  新しい本を作成する
  $ npx zenn new:book

  👇  投稿をプレビューする
  $ npx zenn preview
↓ のようにREADME.md、.gitignore、articles、booksができています。
$ ll
total 4
drwxrwxrwx 1 **********4096 Jun  8 08:48 ./
drwxrwxrwx 1 **********4096 Jun  8 08:35 ../
drwxrwxrwx 1 **********4096 Jun  8 08:35 .git/
-rwxrwxrwx 1 **********  22 Jun  8 08:48 .gitignore*
-rwxrwxrwx 1 **********  78 Jun  8 08:48 README.md*
drwxrwxrwx 1 **********4096 Jun  8 08:48 articles/
drwxrwxrwx 1 **********4096 Jun  8 08:48 books/
drwxrwxrwx 1 **********4096 Jun  8 08:45 node_modules/
-rwxrwxrwx 1 ********** 657 Jun  8 08:45 package-lock.json*
-rwxrwxrwx 1 ********** 279 Jun  8 08:45 package.json*
記事や本を管理するルールは ↓ の記事をご覧ください
https://zenn.dev/zenn/articles/zenn-cli-guide
いったん、この状態でリモートリポジトリに pushしておきます
$ git add .
$ git commit -m "install zenn-cli"
$ git push

 動作確認
 ローカルで記事を作成リポジトリ内で ↓ のコマンドを実行し markdown ファイルを作成します
$ npx zenn new:article --slug 20240609_github_to_zenn_first
created: articles/20240609_github_to_zenn_first.md
オプションで指定しているslugというのはZenn のコンテンツに与えられる一意の IDのこと。
指定しない場合は適当な値を振られます。
他にも記事のタイトルや絵文字、タイプなどをオプションで指定できます
$ npx zenn new:article --help

Command:
  zenn new:article  新しい記事を追加

Usage:
  npx zenn new:article [options]

Options:
  --slug      SLUG     記事のスラッグ. `a-z0-9`とハイフン(`-`)とアンダースコア(`_`)の12〜50字の組み合わせ
  --title     TITLE    記事のタイトル
  --type      TYPE     記事のタイプ. tech (技術記事) / idea (アイデア記事) のどちらかから選択
  --emoji     EMOJI    アイキャッチとして使われる絵文字（1文字だけ）
  --published          公開設定. true か false を指定する. デフォルトで"false"
  --publication-name   Publication名. Zenn Publication に紐付ける場合のみ指定
  --machine-readable   作成成功時にファイル名のみを出力する

  --help, -h       このヘルプを表示

Example:
  npx zenn new:article --slug enjoy-zenn-with-client --title タイトル --type idea --emoji ✨

  👇  詳細
  https://zenn.dev/zenn/articles/zenn-cli-guide
先ほどのコマンドで articles/<slug>.md ファイルが作成され、中身は ↓ のようになっています
---
title: ""
emoji: "😸"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: false
---


項目
説明


title
記事のタイトル

emoji
記事のアイキャッチになる絵文字

type
技術記事 or アイデア記事

topics
タグ。

published
公開設定。 true：push したらそのまま Zenn に公開。 false：push したら下書きとして投稿。

-- で囲まれたブロックにメタ情報を記載し、その下に MarkDown で本文を書いていきます
今回、ファイルの中身はこんな感じにしてみました！
# この記事は？

Zenn と GitHub を連携してから初めての記事投稿です。

 記事をプレビューで見てみる作成した記事を GitHub に上げる前にプレビューで見てみます
$ npx zenn preview
👀 Preview: http://localhost:8000
↑ のコマンドを実行して、http://localhost:8000  にアクセスしてください
Zenn Editorが開きます。左側の articles から記事のプレビューが見れます
ファイルを編集後、ページをリロードするとプレビューが更新されます

 記事を投稿プレビューで確認して大丈夫だったら、記事を投稿するために GitHub に pushします
$ git add .
$ git commit -m "add first article"
$ git push
Zenn のダッシュボードにて記事の管理を見ると投稿されています

 記事を更新記事を更新するには、markdown ファイルを編集して GitHub に push すれば OKです！
// ファイル編集後このコマンドを実行
$ git add .
$ git commit -m "edit first article"
$ git push
Zenn のダッシュボードにて記事の管理を見ると更新されています！

 ブラウザで作成した記事を GitHub へ持ってくる最後に、すでにブラウザから投稿した記事を GitHub のリポジトリに取り込みます。
GitHub にない記事はZenn のダッシュボードにて記事の管理を見ると「同期されていません」と表示されます
取り込みたい記事をクリックして編集画面に行くと、↓ のような表示があります
記事と赤枠の名前のファイルが同期されるので、コマンドでファイルを作成します
$ npx zenn new:article --slug fa1e497571f40a
メタ情報や本文を投稿されている内容に合わせて記述したら、GitHub に上げます
Zenn のダッシュボードにて記事の管理を見て、「〇分前に同期」と表示されていれば OK！
これで Zenn と GitHub の連携や一通りの操作はできました！

 参考https://zenn.dev/zenn/articles/connect-to-github
https://zenn.dev/zenn/articles/install-zenn-cli
https://zenn.dev/zenn/articles/zenn-cli-guide

項目	説明
title	記事のタイトル
emoji	記事のアイキャッチになる絵文字
type	技術記事 or アイデア記事
topics	タグ。
published	公開設定。 true：push したらそのまま Zenn に公開。 false：push したら下書きとして投稿。

この記事は？

連携方法

何ができる？

前提

ゴール

やること

GitHub リポジトリを作成

Zenn と GitHub リポジトリを連携

GitHub リポジトリをクローン

ZennCLI のインストール

初期セットアップ

動作確認

ローカルで記事を作成

記事をプレビューで見てみる

記事を投稿

記事を更新

ブラウザで作成した記事を GitHub へ持ってくる

参考

Discussion