⚙️

Zenn × GitHub の環境構築

に公開
Git
GitHub
VS Code
Zenn
Zenn CLI
tech

はじめに

Zenn × GitHub の環境構築の手順を備忘録として残します。
今後、GitHub と連携して Zenn でブログを始める方のご参考となれば嬉しいです。

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 に登録する方法については、以下のリンクからご確認ください。
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

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 ""

おわりに

もし、少しでもこの記事がお役に立てましたら、ぜひ "いいね" をお願いします。

Discussion