(1から)ZennとGitHubの連携，VScodeで運用
まえがき
Zennを始めるにあたり，Githubと連携を行いました．
しかしGitHubをこれまで活用してきていなかったので，1からの流れをまとめます．
できること
ローカルファイルに保存してある.mdファイルをGithubにupload
同時に変更されたファイルを読み取りZennの記事が変更される
Gitで変更の履歴が管理できる
機器概要
| 機器 | version |
|---|---|
| Windows10 Laptop | --- |
| VSCode | 1.49.1 |
| Node.js | 12.18.4 |
| Git | 2.28.0 |
手順
1. Git，GitHubの設定
引用 [1]
インストール，アカウント登録，公開鍵登録，リポジトリ作成まで
Git初期設定 [2]
Git Bashを開いて以下のコマンドを実行,listで確認
$ git config --global user.name "{GitHubに登録したユーザ名}"
$ git config --global user.email "{GitHubに登録したメールアドレス}"
$ git config --list
入力出来ていれば完了
2.ZennとGitHubの連携 [3]
Zennにログインして，ダッシュボードからデプロイ管理を開き，1つリポジトリを選択，連携
3.Zenn CLIをインストール [4]
Zenn CLIはNode.js製のためNode.jsをインストール [5]
Git BashでZennのコンテンツ管理をするディレクトリを開く
以下のコマンドを実行
$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入
#インストール後
$ npx zenn init # コンテンツ管理用のディレクトリなどが作成される
articles：記事(.md)
book：本(.yaml,.png,.md)
ファイル作成のコマンド
npx zenn new:{作成するコンテンツ} #article / book
記述の仕方[記事]
・記事(.md)
---
title: "{記事のタイトル}"
emoji: "😸" # アイキャッチの絵文字（1文字のみ）
type: "{記事のタイプ}" # (tech: 技術記事 / idea: アイデア記事)
topics: [tag1，tag2] # タグ
published: true # 公開設定(true: 公開 / false: 下書き)
---
本文
記述の仕方[本]
・config(.yaml)【名前は固定】
title: "{本のタイトル}"
summary: "{本の紹介文}"
topics: ["topic1", "topic2", "topic3"] # トピック（5つまで）
published: true # (true: 公開 / false: 下書き)
price: 0 # 有料の場合200〜5000
chapters:
- chapter1 # チャプター1
- chapter2 # チャプター2
- chapter3 # チャプター3
・cover(.png/.jpeg)【名前は固定】
サイズは500×700
・チャプター(.md)
---
title: "{チャプターのタイトル}"
---
本文
4. VScodeの設定
VScodeをインストール，設定 [6]
Gitに関する拡張機能をインストール
5. VScodeから記事作成,アップロード [7] [8]
既にGitHubにあるリポジトリを利用する場合
GitHubよりリポジトリのClone or downloadからURLをコピーする(HTTPS,SSHのどちらか)
私はSSHで設定したのでSSH
Git Bashでコンテンツ管理するディレクトリを開く
リポジトリをローカルにクローンするコマンド
$ git clone {GitHubからコピーしたURL}
一度ローカルに落として作業，アップロードという流れ
ローカルのファイルからリポジトリを作成する場合
VScodeでリポジトリとしたいファイルを開く
リポジトリを初期化するをクリック
記事作成とアップロード
コンテンツ管理のフォルダを開く
.mdファイルを作成して記述
ソース管理より変更をステージ，コミット
問題なければプッシュ
プッシュが成功すれば，GitHubで更新され，記事も更新される
感想
環境構築が面倒だった
ファイル名の制限が意外と気づかず苦戦，だるい
独自の記述が結構良い
Qiitaとの比較
画像を記事にD&Dできないのは個人的にきつい(Webの方使えって話)
見た目はすごく見やすくて好き
参考
Git&Github
Zenn
VScode-terminal
Discussion