Zenn を GitHub で運用する方法：環境構築から予約投稿まで
はじめに
私が Zenn でブログを始める際に実施した環境構築の作業と、実際の運用で使うコマンドについて、備忘録として残します。
今後、GitHub と連携して Zenn でブログを始める方のご参考となれば嬉しいです。
本記事の概要について
この記事は、以下の 2 つのセクションに分かれています。
- Zenn で GitHub 連携するための環境構築セクション
- GitHub 運用でよく使うコマンドまとめセクション
Zenn と GitHub を連携することのメリット
- ローカルで好きなテキストエディタを使って Zenn 記事を執筆できる。
- Zenn がサービス終了しても、GitHub 上に記事があるため、記事が消えない。
- 記事に変更が合っても、GitHub を使って記事のバージョンを管理できる。
私は特に、GitHub 連携することで記事が消えないことに魅力を感じました。
構築手順1: Zenn と GitHub を連携する。
パブリックとプライベートのどちらでもいいので、GitHub で、Zenn の記事をアップロードする用のリポジトリを作成する。
その後、Zenn にログインし、自分のプロフィールアイコンをクリック → 「GitHub からのデプロイ」 から 「リポジトリを連携する」。
構築手順2: Zenn CLI をインストールする。
以下のコマンドを順に実行することにより、Zenn CLI をインストールできます。
npm init --yes # プロジェクトをデフォルト設定で初期化
npm install zenn-cli # zenn-cliを導入
npm install zenn-cli@latest # zenn-cliをアップデート
以下のコマンドより、Zenn 用のセットアップを行います。
npx zenn init
その結果、カレントディレクトリ (今作業中のディレクトリ) に、"articles" フォルダと "books" フォルダが自動生成されます。
Zenn の記事や本に画像を埋め込むために、画像管理用のフォルダ "images" を手動で作成します。
Zenn #Zenn 用のセットアップを行ったフォルダ。こちらは任意のフォルダです。
└── articles #自動生成される
└── books #自動生成される
└── images #手動で作成する
構築手順3: リモートリポジトリの追加。
ローカルで Git リポジトリを新たに作成します。
以下のコマンドは、Zenn のセットアップを行ったフォルダで実行してください。
上記のファイル構成例だと、"Zenn" フォルダが該当します。
git init
作成したローカルの Git リポジトリに、リモートリポジトリ (プッシュ先の GitHub) を追加します。
git remote add origin git@github.com:***/***.git
#"***/***" には、"GitHub のユーザー名/リポジトリ名" が入ります。
リモートリポジトリの設定状況を確認します。
git remote -v
以下のように表示されれば、問題なし。
origin git@github.com:***/***.git (fetch)
origin git@github.com:***/***.git (push)
構築手順4: GitHub に対する SSH 接続を構成する。
まず、SSH の公開鍵と秘密鍵を作成します。
パスワードを何に設定するか聞かれますが、設定せず、ENTER 連打で問題なし。
ssh-keygen -t ed25519 -C "<ユーザー名>@<ホスト名>"
次に、作成した秘密鍵を SSH エージェントに登録します。
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
そして、公開鍵をコピーして、GitHub に登録します。
cat ~/.ssh/id_ed25519.pub #公開鍵を確認する。
公開鍵を GitHub に登録する方法については、以下のリンクからご確認ください。
GitHub に公開鍵を追加した後、SSH 接続をテストします。
ssh -T git@github.com
以下のようなメッセージが表示されれば、問題ありません。
Hi <ユーザー名>! You've successfully authenticated, but GitHub does not provide shell access.
もし、この SSH 接続を構成する手順を実施しなかった場合、以下のようなエラーが出力されます。
The authenticity of host 'github.com (**.**.***.***)' can't be established.
ED25519 key fingerprint is ***
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
Mac を使っている方におすすめの設定
Mac OS では、スクリーンショットのファイル名が、デフォルトで 「スクリーンショット YYYY-MM-DD hh.mm.ss」 と設定されています。
私は、Zenn の記事に埋め込む画像の管理がしやすいように、以下のコマンドから、デフォルトのファイル名を 「YYYY-MM-DD hh.mm.ss」 に設定を変更しました。
defaults write com.apple.screencapture name ""
GitHub 運用でよく使うコマンドまとめ
新しい記事を作成して、必要に応じてプレビュー表示しつつ、執筆作業を行います。
npx zenn new:article #新しい記事を作成する。--slug オプションで .md ファイルの名称指定もできる。
npx zenn preview #書いている記事をローカルでプレビュー表示する。--port オプションで公開するポートを変えられる。
記事が完成したら、以下のコマンドを順に実行して、GitHub にプッシュする。
GitHub にプッシュが完了すると、Zenn にも自動的に反映されます。
git add . #ステージングする。
git commit -m "First Commit" #コミットする。コミットメッセージは任意で設定できます。
git push origin main #Origin リポジトリの Main ブランチにプッシュする。
Zenn 記事や本を書く時に役立つリンク
まとめ
この記事では、Zenn と GitHub を連携する場合の環境構築の手順、並びに Zenn の運用方法についてご紹介いたしました。
もし何か、「Zenn の記事を書く時はこういう設定もいいよ！」 などアドバイスがございましたら、コメントいただけると大変嬉しいです。
おわりに
もし、少しでもこの記事がお役に立てましたら、ぜひ "いいね" をお願いします。
また、今後もブログを更新して行きますので、Zenn と X のフォローをどうぞよろしくお願いいたします。
Discussion