GitHubとZennを連携する手順
はじめに
Zennで記事を書いていくのに、webのエディターではなくローカル環境で記事を書きたいと思ったので、githubと連携して書くことにしました。
ここでは、githubとzennを連携する手順、
記事の書き方について記載します。
GitHubとZennを連携する手順
-
GitHubにzennと連携するリポジトリを作成
-
Zennにログインし、GitHub連携を開き、「リポジトリを連携するボタン」 ＞ 「連携へ進む」ボタンを押す
-
GitHubの認証画面で、「Only select repositories」を選択し、連携するリポジトリを選び、「Install & Authorize」ボタンを押します。環境にもよるとは思いますが、自分はパスワード入力の必要がありました。
-
GitHubの認証が完了すると、GitHub連携のページが以下のようになります。
mainブランチにファイルをpushすれば、投稿が出来るようになるようです。
Zenn CLIをインストールする
CLIを使うことで、記事を作成したり、プレビューを見たりできるようです。
- Node.jsをインストール
- Zenn CLIをインストール
- Zennと連携しているリポジトリに移動して、以下のコマンドを入力します。
> npm init --yes
> npm install zenn-cli
以下のコマンド入力で記事の作成が出来ます。
> npx zenn init
🎉 Done!
早速コンテンツを作成しましょう
👇 新しい記事を作成する
$ zenn new:article
$ zenn new:book
👇 投稿をプレビューする
$ zenn preview
ヘルプ表示もできます。
> npx zenn --help
Command:
zenn init コンテンツ管理用のディレクトリを作成. 初回のみ実行
zenn preview コンテンツをブラウザでプレビュー
zenn new:article 新しい記事を追加
zenn new:book 新しい本を追加
zenn list:articles 記事の一覧を表示
zenn list:books 本の一覧を表示
zenn --version, -v zenn-cliのバージョンを表示
zenn --help, -h ヘルプ
👇 詳細
https://zenn.dev/zenn/articles/zenn-cli-guide
各コマンドのヘルプも確認できました。
> npx zenn new:article --help
Command:
zenn new:article 新しい記事を追加
Usage:
npx zenn new:article [options]
Options:
--slug SLUG 記事のスラッグ. `a-z0-9`とハイフン(`-`)とアンダースコア(`_`)の12〜50字の組み合わせ
--title TITLE 記事のタイトル
--type TYPE 記事のタイプ. tech (技術記事) / idea (アイデア記事) のどちらかから選択
--emoji EMOJI アイキャッチとして使われる絵文字（1文字だけ）
--published 公開設定. true か false を指定する. デフォルトで"false"
--publication-name Publication名. Zenn Publication に紐付ける場合のみ指定
--machine-readable 作成成功時にファイル名のみを出力する
--help, -h このヘルプを表示
Example:
npx zenn new:article --slug enjoy-zenn-with-client --title タイトル --type idea --emoji ✨
👇 詳細
https://zenn.dev/zenn/articles/zenn-cli-guide
記事を作成する手順
スラッグ付きの記事も簡単に作成可能です。本記事は以下のコマンドで作成しています。
npx zenn new:article --slug zenn_github_connect
画像を表示する場合は、リポジトリ直下に、/images ディレクトリを作成してファイルを配置します。
/images ディレクトリ配下の構造は自由なようです。
ファイル名を日時にしていますが、ファイル名に関しても自由なようです。
画像の指定方法は以下となります。
プレビューの確認方法
プレビューは以下のコマンドで可能です。
npx zenn preview
プレビューすると、http://localhost:8000/ にプレビューが表示されます。
ファイルを保存すると、プレビューもホットリロードで更新されるのでプレビューを見ながら記事を書くことが可能です。
ただ、プレビュー表示中はコンソールを握られた状態になるので、プレビュー表示用と、git操作用の2つのコンソールを立ち上げています。
記事の公開
記事は、リポジトリに作詞した記事をpushして公開します。
参考
Discussion