4ステップでGithubからZennに記事を公開してみる(トラブルシューティング付き)

公開:2020/09/17
更新:2020/09/17
6 min読了の目安(約4000字TECH技術記事
Likes27

ZennはGithubから記事をデプロイ(公開)できるようなので、公式ページに従って試してみます。

1.Zenn投稿用のリポジトリの用意


今回は新規にzenn-postというリポジトリをプライベートで作成しました。

2.リポジトリの連携

ZennのDeploys(BETA)にアクセスします。

リポジトリを連携ボタンをクリックします。


先程作成したzenn-postリポジトリと連携します。

このタイミングで再度パスワードが求められるかも知れません。

3.記事の追加

準備は完了したので記事を追加していきます。

ちなみに最低限以下の条件をクリアしておく必要があります。

  • Front-matterが文頭に必要
  • ファイル名が12文字以上

これらはzenn-cliを利用することで自動で初期設定されます。

※細かい仕様は公式ページを参考にすると良いです

以下の内容でmasterにpushしてみます。

---
title: ZennをGithubからDeployしてみる
emoji: 😸
type: tech
topics: [Zenn, Github, Deploy, CLI]
published: true
---

from repository post test.

4.デプロイ成功

materブランチにpushすると、待機時間ほぼなくZenn側にデプロイされます。

まとめ

GithubとZennとの連携は結構簡単でした。
後述のトラブルシューティングにも記載していますが、Front-matterにpublished: falseを追加していないと記事がpush時に公開されてしまうので注意が必要です。

Github連携したほうが自分の好きなMarkDownで記事を書けるので、個人的にはこのやり方で執筆していこうと思いました。


トラブルシューティング

ここからは僕が実際にハマったトラブル共有です。
※公式マニュアルを見ながらやれば大丈夫だとは思いますが、僕はプライベートでのプラモデルは取説を見ずに作る派ですので、しっかりとハマりました。

記事はarticlesディレクトリが必要


リポジトリのルートディレクトリにtest.mdを追加してみます。

articlesが取得できませんでした。リポジトリ名・ブランチ名・ディレクトリ構造を見直してください

するとこのようなエラーが起きます。

以下のようにarticlesフォルダ配下に記事のMarkDownファイルを追加する構成にする必要があります。

articles
└── test.md

ファイル名は12文字以上にする必要がある

test.mdのように12文字未満のファイル名でpushしてみます。

不正なファイル名のマークダウンファイル(test2.md)のデプロイはスキップされました。slugは半角英数字(a-z0-9)とハイフン(-)の12〜50字の組み合わせにする必要があります

このようなエラーが出力されるので、12文字以上のファイル名にしましょう。
ちなみに僕は日付連番-meta情報.mdみたいな形にしてみました。(例 : 20200917001-hogehoge.md)

Front-matterが必要

FrontMatterが見つかりませんでした

Front-matterとは

僕はMarkDownのMeta情報と捉えていて、この情報を元に記事のタイトルや、カテゴリなどを設定します。以下は公式サイトで紹介されている書式です。

title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字(1文字だけ)
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定(falseにすると下書き)

参考サイト

Front-matterのpublishedが存在しない場合は公開される

published: false

publishedを定義しておかないとDeploy時に記事が公開されてしまうので注意です。

Front-matter文法ミス

Front-matterで文法がおかしかった場合は、以下のようなエラーが出ます。

((<unknown>): could not find expected ':' while scanning a simple key

コロン「:」の後は半角スペースが必要なので注意です。

Github側のファイル名リネームするとどうなるか?


ファイルをリネームすると、Zenn側は追随せず記事が増えますので、慎重さが必要になります。

Github側のファイル名を元に戻すとどうなるか?


ファイル名を戻しても記事はそれ以上増えません。あくまで新規のファイル名になった場合に記事は追加されるようです。

トラブルシューティングは以上です。