🚀

GitHub から Zenn へ: CLI で初投稿する最短ワークフロー

に公開
GitHub
Zenn
CLI
workflow
tech

この記事は？

GitHub 上で記事をバージョン管理しながら Zenn に公開する手順を、初めて挑戦する人でも迷わないように整理しました。この記事では、Zenn CLI の基本操作から Git リポジトリへの反映、公開後の確認までを一気通貫で解説します。

環境準備

  • Node.js と npm がインストール済みであることを確認します。
  • package.json に zenn-cli が含まれているか確認し、必要に応じて npm install zenn-cli を実行します。
  • GitHub リポジトリが Zenn と連携済みであることを確認し、必要なら GitHub 側でデプロイ先を指定します。

記事ファイルの作成

npx zenn new:article

上記コマンドを実行すると、articles/ 配下に YYYYMMDD_slug.md 形式のファイルが生成されます。Front Matter ではタイトルやトピック、公開設定を適切に設定しましょう。公開準備が整うまでは published: false のままにしておきます。

編集とプレビュー

  • エディタで Markdown を編集し、見出しやコードブロックを整形します。
  • ローカルで表示を確認するには以下を実行します。
    npx zenn preview
    ブラウザで http://localhost:8000 を開き、レイアウトやリンク切れをチェックします。

GitHub へのコミットとプッシュ

  1. git status で変更差分を確認します。
  2. 必要なファイルを git add します。
  3. git commit -m "Zenn 記事: GitHub から Zenn へ" のようにコミットメッセージを付けます。
  4. git push origin <ブランチ名> でリモートへ反映します。

Zenn での公開確認

  • Zenn ダッシュボードにアクセスし、デプロイ状況を確認します。
  • 公開後にレイアウト崩れがないか、外部リンクが正しく動作するかをチェックします。

よくあるつまずきと対処法

  • push したのに公開されない: published: true に切り替え忘れていないか、デプロイ中かを確認します。
  • 画像が表示されない: 相対パスやファイル名の大小文字が正しいか見直します。
  • デプロイ失敗: GitHub の Actions ログや Zenn のデプロイ履歴でエラー内容を確認します。

まとめ

Zenn CLI を使えば、ローカルで記事を整えながら GitHub で履歴管理し、そのまま公開まで進められます。チェックリストを活用して、次回以降もスムーズに記事を公開していきましょう。

Discussion