zenn.dev と github を連携して、オフラインで記事を書いてみた

前回 zenn.dev に記事を投稿してみたら、わりと楽しかったので、 github と連携して記事をオフラインで書けるようにしました。

環境としては、 Windows ローカル環境に Visual Studio Code と Git をインストールしました。ここでは省略しますが、 Portable 版でも構いません。実際にこれは Portable 版で書いています。たまたま私の持ち運び環境が Windows であったというだけで、 Linux や Mac でも問題ないと思います。

そして、 github 上にレポジトリを作成し、 zenn.dev と連携します。連携方法は zenn.dev に詳しく書かれているので、ここも省略します。

つぎに、 github 上のレポジトリを clone して、ローカルに落とします。と言っても、中身は空っぽなので、見かけ上は空っぽのディレクトリができるだけだと思います。その空っぽに見えるディレクトリに、以下のようにフォルダを作成して、ファイルを作成していきます。

.
└─ articles
   ├── example-article1.md
   └── example-article2.md

このフォルダ構造は、 zenn.dev から取ってきたものです。 articles ディレクトリ名は変更できないみたいです。また、各記事ファイル名は半角英数字（a-z0-9）とハイフン（-）の12〜50字の組み合わせと拡張子 .md として作成する必要があるみたいです。

そして、各記事ファイルの中身は markdown で記述していくのですが、先頭に以下のような FrontMatter を付けておく必要があります。

---
title: "zenn.dev と github を連携して、オフラインで記事を書いてみた" # 記事のタイトル
emoji: "🌊" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: ["github"] # タグ。["markdown", "rust", "aws"]のように指定する
published: false # 公開設定（falseにすると下書き）
---

あとは中身を自由に記述し、 commit & push すると、自動的に記事が deploy されます。

プレビューを確認したら、 FrontMatter 内の published を以下のように true に変更して push すれば、記事が公開されます。

published: true # 公開設定（falseにすると下書き）

zenn.dev 内のオンラインエディタで書き進めていっても良かったのですが、記事が github 上にあると、最悪 zenn.dev のサービスが停止しても記事は手元に残りますので、こちらの方法で書いていくことにしました。