🦍
Zenn を VS Code で編集する（GitHub連携）
Zenn の記事を Visual Studio Code で編集して Git で管理する方法を説明します。
🛠️ 事前準備
デバイスやソフトウェアは以下を用いる。
- 💻 PC端末（macOS）
- 💿 Git 、🌐 GitHub、 🔌 Zenn Connect
- 💿 Node.js 、 🔌 Zenn CLI
- 💿 Visual Studio Code 、 🔌 Zenn Preview
1. Git および GitHub の導入
Git のインストールと GitHub への接続確認を済ませておく。
2. Node.js の導入
公式サイトからパッケージファイルをダウンロードし、インストールを済ませておく。
3. Visual Studio Code の導入
以下の記事を参考に VS Code を導入しておく。
※VS Code には、以下の拡張機能を適用しておく。
- Zenn Preview for github.dev
🎭 作業手順
1. GitHub でリポジトリを作成
GitHub にログインして、新しいGitHubリポジトリの作成ページより、データの保存場所を作成する。
| 項目 | 設定値 | 説明 |
|---|---|---|
| Repository name | zenn-docs | リポジトリの名称 |
| Description | Repository for https://zenn.dev/USERNAME (powered by Zenn) | リポジトリの説明（任意） |
| Pcblic / Private | Private | プロジェクトの公開／非公開 |
| Add a README file | - | READMEファイルを作成する |
| Add .gitignore | None | Git で管理しないファイルの設定を追加する |
| Choose a license | None | このリポジトリのライセンス設定 |
※画面項目の詳しい説明は公式ガイドを参照
2. Zenn Connect を連携
Zenn にログインして、GitHub連携の設定ページより、リポジトリを連携する。
| 項目 | 設定値 | 説明 |
|---|---|---|
| All repositories / Only select repositories | Only select repositories | リポジトリへのアクセス許可設定 |
| Select repositories | 🔒 USERNAME/zenn-docs | アクセスを許可するリポジトリ |
※画面項目の詳しい説明は公式ガイドを参照
3. VS Code で執筆環境の構築
VS Code を起動してリポジトリの複製とワークスペースの作成を行う。
🎬 ① ソース管理 メニューより[リポジトリのクローン] を選択する。
🎬 ② リポジトリのURL（ssh:// URL）を入力してEnter キーを押下する。
🎬 ③ リポジトリの複製先となるディレクトリを選択（または作成）する。
🎬 ⑤ 複製したリポジトリを開くための確認ダイアログが表示されるので [開く] を選択する。
🎬 ⑥ ファイルの安全性に問題がない場合は [はい、作成者を信頼します] を選択する。
🎬 ⑦ メニューバーの [ファイル] -> [名前を付けてワークスペースを保存 …] を選択する。
| 名前 | タグ | 場所 |
|---|---|---|
| zenn.code-workspace | ~/Workspace |
🎬 ⑧ `Command` + `J` キーで VS Code の統合ターミナルを起動する。
4. Zenn CLI の導入
対象のリポジトリに Zenn CLI をインストールする。
🖥️ terminal ~/Workspace/zenn-docs
$ # リポジトリに移動
$ cd ~/Workspace/zenn-docs
$ # npmで管理するプロジェクトをデフォルト設定で初期化
$ npm init --yes
$ # zenn-cli をインストール
$ npm install zenn-cli
$ # Zenn のセットアップ
$ npx zenn init
$ # Git による追跡からファイルを除外
$ cat <<EOF >> .gitignore
Host *.github.com
node_modules/
package-lock.json
package.json
README.md
EOF
※インストールの詳しい説明は公式ガイドを参照
5. 基本的な操作について
バージョン管理機能を備えたマークダウンエディタとして利用する。
Zenn Preview による投稿管理画面
Discussion