(1から)ZennとGitHubの連携,VScodeで運用

4 min read読了の目安(約4000字

まえがき

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)

.mdファイルは半角英数字と-(ハイフン)のみ
ファイル名は12字~50字である必要がある
Front-matterが文頭に必要

ファイル作成のコマンド
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

脚注
  1. Windows10にGitをインストールして初期設定する ↩︎

  2. いまさらGit for Windowsのインストール、GitHubに接続してみた。 ↩︎

  3. GitHubリポジトリでZennのコンテンツを管理する ↩︎

  4. Zenn CLIをインストールする ↩︎

  5. Node.jsをインストールする ↩︎

  6. Visual Studio Code (Windows版) のインストール ↩︎

  7. GitHubとVSCODEの連携方法 ↩︎

  8. VSCodeでのGitの基本操作まとめ ↩︎