Zenn
🔰

Zenn と GitHub を連携しで Git で管理する記事を公開するまで

2024/10/07に公開
Zenn
idea

Zenn と GitHub を連携しで Git で管理する記事を公開するまで

  • Zenn のアカウントを作成してから GitHub を連携し、記事を公開するまでのメモ
  • 事前準備として Zenn, GitHub のアカウントは作成されているものとする

GitHub

  • 連携するリポジトリの作成
    • 適宜名前をつけてリポジトリを作成する
    • private でも問題ない

Zen CLI のインストール

Node.JS のインストール

  1. Zenn CLI を使用するには Node.js 14 以上が必要なので Node.JS をインストールする
    • 今回は Package Manager からインストールを行う
    • 指示された通りにコマンドを実行していくと ~/.nvm に インストールされ、使用している shell の設定にいろいろ追記される
    • シェルの設定を再読み込みして node コマンドが実行できるようになる

Zenn CLI のインストール

  1. npm から Zenn のインストールを行う
    • zenn 作業用のディレクトリを作成し、 npm からインストールする
      • $ npm install zenn-cli --save-dev
    • バージョンが表示されるようになったら成功
      • $ npx zenn --version

リポジトリに Zenn init する

  1. GitHub からリポジトリを Clone する
  2. リポジトリ直下で init する
    • $ npx zenn init
    • コマンドの紹介が表示されたら成功

記事の作成

  1. 記事となる md ファイルの作成
    • $ npx zenn new:article --slug [slugの文字列]-$(openssl rand -hex 4)
      • リポジトリの直下で実行
      • 上記のコマンドは slug の重複を避けるために乱数を付与している
      • slug の文字列は拡張子 ( .md ) が付与され記事のファイル名になる
    • slug は記事や本に対するユニークな ID で md のファイル名になり、以下の制約を受ける
      • サイト全体で記事ごとにユニーク
      • 半角英小文字, 半角数字, ハイフン, アンダースコア の 12 ~ 50 文字
      • 変更不可
      • Zennのスラッグ（slug）とは
  2. プレビュー
    • 簡易的なプレビューはコードエディタの md プレビューで閲覧できる
    • ブラウザでプレビューする場合は $ npx zenn preview --port [port] の後 localhost にブラウザからアクセスして閲覧可能
  3. 記事の公開
    • 記事が完成したら published を true にして GitHub の公開対象のブランチに Push する

Discussion