Zenn
🍇

GitHubとZennの雑な連携手順メモ

に公開
GitHub
VS Code
Zenn
Zenn CLI
tech

画像にアニメGIFを沢山貼りたいのですが、残念ながら Zenn には3MB以下という制限があります。

そこで ChatGPT に質問したところ、GitHub と連携してリポジトリ内に画像を保存し、そのURLを参照することで3MB以上の画像を貼り付けられるようになるということだったので試してみました。本記事はその際のメモになります。

ただし、結論から言えば GitHub 連携でも 3MB の制限があり、ChatGPT に騙されました。。

また、Zenn の記事や本をブラウザ上で作成している際にそれらのコンテンツはリポジトリには反映されないため、基本的に新しく記事を作ることになると思います。その点はご注意ください。

細かい部分は ChatGPT に全て教えてもらいました。便利すぎます！

✅ ステップ1：GitHubアカウントを作る

  1. GitHubの公式サイトにアクセス
  2. 右上の「Sign up（登録）」をクリック
  3. ユーザー名・メールアドレス・パスワードを入力
  4. メール確認を済ませてアカウントを有効化

✅ ステップ2：Zenn用のGitHubリポジトリを作る

  1. ログイン後、GitHubの右上「＋」→「New repository」をクリック
  2. リポジトリ名を入力（例：zenn-contents）
  3. 「Public（公開）」のままでOK
  4. 「Initialize with a README」はチェックなしで作成します

✅ ステップ3：Zenn CLI をパソコンにインストール

  1. まず、Node.jsが必要なので以下からインストール
    • https://nodejs.org/ja
    • LTS推奨版を選べばOK
    • Zennで利用するだけなら、インストール時に自動で必要なツールをインストールするチェックボックスが表示されたら無しのままでOK

✅ ステップ4：ローカル環境でZennの設定を行う

  1. 作業用のフォルダを作成してその中に移動：
mkdir zenn-contents
cd zenn-contents
  1. Zenn用の初期ファイルを作成：
npm zenn init

これで articles や images フォルダなどができます。

  1. Zenn CLI をインストール
    フォルダごとにインストールする形だそうなので、必ず作業用フォルダのパスへ移動してから実行する必要があるようです。ご注意ください。
npm install zenn-cli

こちらのように表示されたらOK！

✅ ステップ5：記事と画像を追加する

  1. 記事または本を作成：
npx zenn new:article
npx zenn new:book

例えば本を新規作成すると、ハッシュ値のようなフォルダに３つのファイルが作成されます。

  1. 作られたMarkdownファイル内で画像を挿入するには：
![説明](../images/your-image.png)
  1. images/ フォルダに任意の画像を保存すればOK。

✅ ステップ6：GitHubとZennを連携する

  1. 作ったローカルフォルダをGitHubリポジトリに接続して、ファイルをプッシュ：
git init
git remote add origin https://github.com/あなたのユーザー名/zenn-contents.git
git add .
git commit -m "first commit"
git push -u origin main
  1. Zennの「Your Content」ページでGitHubと連携し、上記のリポジトリを指定するだけでOK！

✅ ステップ7：エディタを導入して記事を書く

VS Code が良さそうです。
https://code.visualstudio.com/

  1. 拡張機能「Zenn Editor」と「Markdown All in One」を入れると良さそう。

  2. メニューの File ＞ Open Folder で GitHub 連携したフォルダを開きます。

  3. Zenn Preview を開くと「zenn-cliが見つかりませんでした」と出るので対処。
    https://zenn.dev/satoru_output/articles/zenn_editor_text

  4. 途中経過をプッシュする

git add .
git commit -m "章2を追加／誤字修正／画像を差し替え"  ← メッセージは自由に
git push

https://zenn.dev/ctrlkeykoyubi/articles/e7d91c5286a409
https://zenn.dev/shuto2828/articles/efficient-blogging-with-vscode-and-zenn-cli

おまけ

こちらのコマンドでプレビューを作成して‥

zenn preview

ブラウザで http://localhost:8000 にアクセスすれば、Zenn風にプレビューできます。

✅ ステップ8：記事をZenn上に公開

「published オプションが true になっていることを確認したうえで、ファイルをコミットし、Zenn と連携されている GitHub リポジトリにプッシュ」すれば良いようです。

Discussion