Zennの記事をGitHubで管理する

GitHub

 

Zennにも記事を投稿するようになりました。

ブラウザ上で記事を編集&投稿しているのですが、なにやらGitHubと連携できるみたいです。

なので、記事をGitHubで管理してZennに投稿できるようにしていきます。

 

何ができる?

 

ZennとGitHubリポジトリを連携することで

  • リポジトリで管理しているコンテンツ(記事や本)を自動で投稿&更新してくれる
  • ブラウザから作成した記事をGitHubに持ってこれる
  • Zenn CLIと組み合わせることで、ローカル環境でコンテンツを作成できる

 

コンテンツの削除はブラウザからのみ実行できます。
他のコンテンツデプロイ時に合わせて投稿されないよう、GitHubリポジトリからも削除しておきましょう!

 

前提

 

  • GitHubZennのアカウントがあるものとします

 

ゴール

 

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

 

やること

 

  1. GitHubリポジトリを作成
  2. ZennとGitHubリポジトリを連携
  3. GitHubリポジトリをクローン
  4. ZennCLIのインストール
  5. 初期セットアップ

 

GitHubリポジトリを作成

 

ここから好きな名前のリポジトリを作成します。

Public, Privateどちらでもよく、README.mdもいりません

 

ZennとGitHubリポジトリを連携

 

Zennにアクセス&ログインし、右上のアイコンをクリック。

GitHubからのデプロイをクリックします

 

リポジトリを連携する > 連携へ進む の順にクリックしていきます

 

Only select repositories をクリックし、Select repositoriesから先ほどのリポジトリを選択。

「Install & Authorize」をクリックします。

仕様上、3つ以上のリポジトリを連携しようとすると失敗します。

 

GitHub側でパスワードを求められたら入力して、「Confirm」

 

連携できるとZennのダッシュボードでデプロイ履歴とリポジトリ設定が見れるようになります

手動デプロイや連携の解除もこの画面からできるんですね~

 

GitHubリポジトリをクローン

 

ここからはGitHubリポジトリ内やローカル環境をととのえていきます。

先ほど作成したGitHubリポジトリをクローンします

 

ZennCLIのインストール

 

Zenn CLIはNodejs 14以上が必要なので、バージョンを確認しておきます

 

Node.jsのインストール方法は↓をご覧ください

 

先ほどクローンしたリポジトリ配下に移動してZenn CLIをインストールします

 

初期セットアップ

 

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

 

↓のようにREADME.md、.gitignore、articles、booksができています。

 

記事や本を管理するルールは↓の記事をご覧ください

 

いったん、この状態でリモートリポジトリにpushしておきます

 

動作確認

ローカルで記事を作成

 

リポジトリ内で↓のコマンドを実行しmarkdownファイルを作成します

 

オプションで指定しているslugというのはZennのコンテンツに与えられる一意のIDのこと。

指定しない場合は適当な値を振られます。

他にも記事のタイトルや絵文字、タイプなどをオプションで指定できます
 

 

先ほどのコマンドで articles/<slug>.mdファイルが作成され、中身は↓のようになっています

— で囲まれたブロックにメタ情報を記載し、その下にMarkDownで本文を書いていきます

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

 

今回、ファイルの中身はこんな感じにしてみました!

 

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

 

作成した記事をGitHubに上げる前にプレビューで見てみます

↑のコマンドを実行して、http://localhost:8000 にアクセスしてください

 

Zenn Editorが開きます。左側のarticlesから記事のプレビューが見れます

 

ファイルを編集後、ページをリロードするとプレビューが更新されます

 

記事を投稿

 

プレビューで確認して大丈夫だったら、記事を投稿するためにGitHubにpushします

 

Zennのダッシュボードにて記事の管理を見ると投稿されています

 

記事を更新

 

記事を更新するには、markdownファイルを編集してGitHubにpushすればOKです!

 

Zennのダッシュボードにて記事の管理を見ると更新されています!

 

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

 

最後に、すでにブラウザから投稿した記事をGitHubのリポジトリに取り込みます。

GitHubにない記事はZennのダッシュボードにて記事の管理を見ると「同期されていません」と表示されます

 

取り込みたい記事をクリックして編集画面に行くと、↓のような表示があります

記事と赤枠の名前のファイルが同期されるので、コマンドでファイルを作成します

 

メタ情報や本文を投稿されている内容に合わせて記述したら、GitHubに上げます

Zennのダッシュボードにて記事の管理を見て、「〇分前に同期」と表示されていればOK!

 

これでZennとGitHubの連携や一通りの操作はできました!

 

参考

 

GitHubリポジトリでZennのコンテンツを管理する
Zenn CLIをインストールする
Zenn CLIで記事・本を管理する方法

 

コメント

タイトルとURLをコピーしました