📝

Zennの記事をHackMDを使って快適にデプロイする

2020/09/18に公開

GitHub

Zenn

idea

はじめに

ZennがGitHubリポジトリと連携可能ということで、同じくGitHubリポジトリ連携に対応しているHackMDと併用して快適に記事をデプロイできないか？という実験記事になります。

注意点

こちらのデプロイ方法はZenn公式が推奨する方法ではないため、自己責任で実施してください。

HackMDとは

HackMDは、オンライン上でMarkdownを利用してノートをとれる無料のWebサービスです。動作が軽いのと、記載したノートをGitHub連携でリポジトリに直接.mdファイルとしてプッシュできるのが特徴です。

本記事ではこのHackMDのGitHub連携を使って、Zennに記事をデプロイする方法を紹介したいと思います。

ZennとGitHubの連携

ZennとGitHubとの連携方法は公式サイトのこちらの記事を参照してください。

まだベータ版とのことですが、簡単に連携できていい感じです。

ここでは仮に「zenn-content」というリポジトリと連携したとします。

Zenn CLIのセットアップ

Zenn用のフォルダ・ファイル構成を整えるために、Zenn CLIをセットアップします。
Zenn CLIのセットアップは公式サイトの以下の記事を参照してください。

HackMDとGitHubの連携

※あらかじめHackMDアカウントの「設定」→「他のサービス許可」から自分のGitHubアカウントを連携させておく必要があります。

記事のフォーマットを作成する

Zennの記事は以下のテンプレートから始めるというフォーマットがあるようです。
HackMDのテンプレートに登録しておいてもいいかもしれません。

---
title: ""
emoji: "😸"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: true
---

以下本文

title .. 記事のタイトル
emoji .. 記事の見出しに使われる絵文字（1文字）
type .. tech: 技術記事 / idea: アイデア
topics .. タグ。["markdown", "rust", "aws"]のように指定
published .. true: 公開 false: 下書き

published が true になっているとそのまま記事をデプロイするようです。

上記以外は普通にMarkdownで記載して大丈夫です。

記事をデプロイする

HackMDで記事を書いたら、編集画面右上メニューから「バージョンをGitHubと同期」を選択します。

以下のようなモーダルが起動するため、「GitHubからプッシュ」を選びます。(どうでもいいけど「GitHub"へ"プッシュ」だよな…)

おそらく「改行ルールの切り替え」というメッセージが出てくるので、改行ルールをMarkdownのスタンダードルールに合わせます。

改行ルールがMarkdown用に切り替わることによって、改行1つだけでは文章が改行表示されなくなりますので、一度記事の見栄えを再確認しておくことをオススメします。

リポジトリの選択画面が出てくるため、先ほどZennと連携したリポジトリを選択し、ブランチを「master」にします。

「同期したいファイルを選択する」には、まだmdファイルが存在しないため、新しいファイル名を付けてあげます。ここで指定したファイル名がslug、つまりZenn上の記事のURLになります。

バージョン名はGitHubのコミットメッセージになるため、自分でわかりやすいようにコメントを記載します。（私は初回デプロイ時は first commit にしてます）

ここで注意点が2点あります。

GitHubにプッシュするときの注意点

パスを `articles/` 以下に指定する

Zennがデプロイ可能なのは articles/ パスの直下に存在する .md ファイルのようです。（本の場合は books/）
このため、ファイル名の選択時に articles/ から始まるパスを指定しています。

ファイル名は半角英数字(a-z0-9)とハイフン(-)の12〜50文字のみで構成する

最初 Article_Zenn_HackMD_Collaboration.md というファイル名でデプロイしようとしましたが、以下のようなエラーが発生しました。

どうやらファイル(slug)名がそのまま記事のURLになる関係上、ファイル名にアンダーバーは使えず、半角英数字とハイフンの組み合わせ、かつ12〜50文字のファイル名にする必要があるようです。
（英大文字も不可です。小文字のみ）

最後に一番下の「プッシュ」を押せば記事のデプロイ完了です。

デプロイが成功した場合、Zenn のデプロイメニューに「デプロイ成功」と表示されているはずです。

おわりに

ZennのGitHub連携は今までの技術記事サイトには無かった利点だと思います！
HackMDから直接デプロイできるのが便利なので、今後もネタを思いついたら記事を公開していきたいと思います。